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" "a" [空格分隔、等于a的]
E[attr^="a"] class="abc" [以a開頭的]
E[attr$="a"] class="bca" [以a結尾的]
E[attr*="a"] class="bac" [包含有a的]
E[attr|="a"] class="a-b" "a" [以a-開頭的]
偽類選擇符
======================================
E:link visited hover active [l v H a]
E:focus
E:not(selector)
E:root [html]
E:empty
E:enabled disabled
E:checked [用于input type為radio與checkbox時]
E:target [選取當前活動的目標元素]
E:only-child
E:first-child last-child
E:nth-child(1 / 2n) nth-last-child(n)
都應用于子元素,從1計數,最高body子元素,[第n個元素,且其必為E]
E:only-of-type
E:first-of-type last-of-type
E:nth-of-type(1 / 2n) nth-last-of-type(n)
都應用于子元素,從1計數,最高body,[第n個E元素]
偽對象選擇符
======================================
E::before after
E::first-letter [塊級(雜志)]
E::first-line [塊級]
E::placeholder [表單輸入框占位符外觀][-webkit- -ms- -moz-]
E::selection [對象被選擇時的樣式background-color、color、text-shadow][-moz-]