CSS選擇符總結

1、型別選擇器：h1，p等

2、類選擇器：.classname

3、id選擇器：#idname

4、萬用字元選擇器：*，表示選擇所有元素

5、屬性選擇器：([foo=』bar』])

特殊的還有：

[src]：選擇所有定義了 src 屬性的元素

[abc^=」def」]：選擇 abc 屬性值以 「def」 開頭的所有元素

[abc$=」def」]：選擇 abc 屬性值以 「def」 結尾的所有元素

[abc*=」def」]：選擇 abc 屬性值中包含子串 「def」 的所有元素

img[src|=」figure」]：選擇 src 屬性的第乙個單詞是 「figure」 的元素，例如 「figure-1」, 「figure-2」

[title~=flower]：選擇 titile 屬性包含單詞 「flower」 的元素

:active：向被啟用的元素新增樣式

:focus：向擁有鍵盤輸入焦點的元素新增樣式

:hover：當滑鼠選懸浮在元素上方時，向元素新增樣式

:link：向未被訪問的鏈結新增樣式

:visited：向已被訪問的鏈結新增樣式

:first-child：向元素的第乙個子元素新增樣式

:lang：向帶有指定lang屬性的元素新增樣式

8、組合選擇符

ul li：空格表示後代選擇器，選擇所有出現在ul上下文裡的li；

ul>li：>表示子元素選擇器，比後代選擇器縮小了範圍，只選擇（下一級）子元素；

h1+p：+表示相鄰兄弟選擇器，選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素；

h1~p：~表示通用兄弟選擇器，同上，但 p 不一定是緊跟 h1。

總結 CSS選擇符

通用 e e id e.class e.class1.class2 關係選擇符 e f 後代 e f 子 e f 相鄰 e f 兄弟 與相鄰選擇符不同的是，兄弟選擇符會命中所有符合條件的兄弟元素，而不強制是緊鄰的元素。屬性選擇符 e attr e attr a e attr a class b a ...

css選擇符總結

子選擇符 div li 只選擇乙個div元素的直接後代 後面的不同子類元素不再被選擇 而且必須是子代，後代不可以 相鄰同輩選擇符 h2 p 可以選擇與h2相鄰的同輩元素p 如果不同輩或者不相鄰將都無法選擇 是 和 結合在一起的結果 h2 p 可以選擇h2元素後面的所有p 元素名 屬性名 例如 a t...

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名，放在方括號裡 title css不限制屬性選擇符只能使用標籤名，也可以使用類。例如 photo title 用於選取類為photo，而且設定了ti...