CSS 選擇器

CSS 1

• 類型： p {...}、blockqote {...}
• 後代結合器： blockquote p { ...}
• ID： <article id="content"> ==>  #content
• 類別： <article class="hentry"> ==> .hentry
• 連結擬類別：a:link {...}、a:visited {...}
• 使用者動作擬類別： a:active {...}
• :first-line 擬元素：p:first-line {...}
• :first-letter 擬元素： p:first-letter {...}

CSS 2.1

• 通用：* {...}
• 使用者動作擬類別：a:hover {...} 和 a:focus {...}
• :lang() 擬類別： article:lang(fr) {...}
• 結構擬類別：p:first-child {...}
• :before 和 :after 擬元素： blockquote:before {...}, a:after {...}
• 子代結合器： h2 > p {...}
• 同層相鄰結合器： h2 + p {...}
• 屬性選擇器： input [required] {...}
• 屬性選擇器（完全等同）：input [type="checkbox"] {...}
• 匹配次字串的屬性選擇器，連字號分隔，開頭需等同於字串： input [lang |= "en"] {...}

CSS3

• 一般同層結合器： h1 ~ pre {...}
• 次字串屬性選擇器，以某字串開頭：a[href^="http://"] {...}
• 次字串屬性選擇器，以某字串結束：a[href$=".pdf"] {...}
• 次字串屬性選擇器，包含某字串：a[href*="twitter"] {...}
• :target()擬類別：section:target {...}
• 結構擬類別，:nth-child：tr:nth-child(even) td {...}
• 結構擬類別，:nth-last-child：tr:nth-last-child(-n+5) td{...}
• 結構擬類別，:last-child：ul li:last-child {...
• 結構擬類別，:only-child：ul li:only-child {...}
• 結構擬類別，:first-of-type：p:first-of-type {...}
• 結構擬類別，:last-of-type：p:last-of-type {...}
• 結構擬類別，:nth-of-type：li:nth-of-type(3n) {...}
• 結構擬類別，:nth-last-of-type：li:nth-last-of-type(1) {...}
• 結構擬類別，:only-of-type： article img:only-of-type {...}
• 結構擬類別，:empty： aside:empty {...}
• 結構擬類別，:root： :root {...}
• 使用者介面元素狀態擬類別，:disabled, :enabled： input:disabled {...}
• 使用者介面元素狀態擬類別，:checked： input[type="checkbox"]:checked {...}
• 否定擬類別：:not ： abbr:not([title]) {...}