比較全面的 CSS 選擇器總結

2021-10-23 09:14:27 字數 1442 閱讀 7734

*

/* 與任何元素匹配 */

e

/* e 表示 html 的元素名 */

div

:first-letter  對指定物件內的第乙個字元起作用,僅對塊元素起作用

:first-line 對指定物件內的第一行內容起作用,僅對塊元素起作用

:before

:afte

e[attr]

/* 表示針對具有 attr 屬性的 e 元素起作用 */

div[id]

元素選擇器的一些匹配規則:

e[attr=value]

e[attr1=value1][attr2=value2]

e[attr~=value]

e[attr|=value]

e[attr^=value]

e[attr$=value]

e[attr*=value]

#idvalue

/* 表示對 id 為 idvalue 的 html 元素起作用 */

定義:

.classvalue

/* 對 class 屬性值為 classvalue 的元素起作用 */

e#idvalue

/* 對 id 屬性為 idvalue 的 e 元素起作用 */

[e].classvalue

/* 對 class 屬性為 classvalue 的e 元素起作用 */

selector1 selector2

/* 對所有包含在 selector1 內部的 selector2 選擇器起作用 */

selector1>selector2

/* 對所有包含在 selector1 內部,且要求 selector2 對應的元素必須是 selector1 對應的元素的直接子元素才起作用 */

selector1 ~ selector2

/* 對 selector1 對應的元素後面(不包含對應元素),且屬於 selector2 作用範圍的元素起作用 */

selector1,selector2

/* 對所列選擇器,只要匹配其中任意乙個的元素起作用 */

CSS選擇器比較

attribute value attribute value 小結elements1 elements2 elements1 elements2,elements1 elements2 elements1 elements2 elements1 elements2 小結 a class a ico...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...