摘要：查看示例程序通配選擇器通用選擇器是一種特殊類型選擇器，表示任何元素類型的元素。例如元素組在未被初始選擇的情況下就為不確定值狀態。組合選擇器后代選擇器匹配的后代的元素并設置其顏色為紅色。

選擇器是CSS的核心組件。本文依據W3C的Selectors Level 4規范，概括總結了Level1-Level4中絕大多數的選擇器，并做了簡單的語法說明及示例演示。希望對程序員有所助益。

類型選擇器也可以稱為標簽名選擇器，會選中文檔中該類型元素的實例。

h1 {
    color: red;
}

將文檔中元素類型為h1的顏色設置成紅色。

查看示例程序

通用選擇器是一種特殊類型選擇器，表示任何元素類型的元素。

* {
    color: red;
}

設置文檔中所有元素的顏色為紅色。

h1[name] {
    color: red;
}

選中元素 h1 中具有屬性 name 的元素。

查看示例程序

h1[title="cool"] {
    color: red;
}

匹配元素 h1 中包含屬性 title 并且屬性值是 cool 的元素。

查看示例程序

h1[title~="cool"] {
    color: red;
}

匹配元素 h1 中包含屬性 title 并且屬性值中包含 cool 的元素。

查看示例程序

h1[title|="cool"] {
    color: red;
}

匹配元素 h1 中包含屬性 title ，并且屬性值是 cool 的元素 或以 cool- 開頭的元素。

查看示例程序

h1[title^="cool"] {
    color: red;    
}

匹配元素 h1 中包含屬性 title ，并且屬性值串以 cool 開頭的元素。

查看示例程序

h1[title$="cool"] {
    color: red;    
}

匹配元素 h1 中包含屬性 title ，并且屬性值串以 cool 結尾的元素。

查看示例程序

h1[title*="cool"] {
    color: red;    
}

匹配元素 h1 中包含屬性 title ，并且屬性值串包含 cool 子串的元素。

查看示例程序

.red {      
    color: red;       
}

匹配文檔中 class 屬性為 red 的元素并設置其顏色為紅色。

查看示例程序

#title {      
    color: red;       
}

匹配文檔中 id 屬性為 title 的元素并設置其顏色為紅色。

查看示例程序

dir() 主要用于匹配符合某個方向性的元素，例如 :dir(ltr) 和 :dir(rtl)，其中ltr是left to right簡寫，表示從左向右，而rtl是right to left，表示從右向左。

:dir(ltr) {
    color: red;
}

匹配文字方向為從左到右的元素。

查看示例程序

:lang(fr) {
    color: red;
}

匹配語言為法語的元素并設置其顏色為紅色。

查看示例程序

匹配帶有 href 屬性的 、、等元素。

:any-link {
    color: red;
}

:link {
    color: red;
}

:visited {
    color: blue;
}

:local-link {
    color: red;
}

三十課
程序員的筆記本
程序員的筆記本2

:target {
    color: red;
}

點擊 html 代碼中的內部鏈接，鏈接的目標對象 id 為 content 的 p元素顏色變為紅色。

用戶指針設備懸停于指定元素時，匹配該元素。

:hover {
    color: red;
}

用戶指針懸停于某元素，匹配該元素并將其設置其顏色為紅色。

查看示例程序

:active {
    background: red;
}

當特定元素處于激活狀態時，設置元素背景色為紅色。

查看示例程序

:focus {
    background: red;
}

當特定元素獲得焦點，設置元素背景色為紅色。

查看示例程序

div:focus-within {        
    border : 1px solid blue;
}

當div中的子元素獲得輸入焦點時，設置div元素邊框為1象素值的藍色邊框。

查看示例程序

在文檔的語音渲染或是顯示字幕期間，常會用到時間軸偽類。

:current(p) {
    color: red;
}

以上規則定義了當前語音渲染段落的顏色為紅色。

:past(p) {
    color: red;
}

以上規則定義了以完成語音渲染段落的顏色為藍色。

:future(p) {
    color: yellow;
}

以上規則定義了以未進行語音渲染段落的顏色為黃色。

:playing {
    border : 1px solid red;
}

匹配當前播放狀態的元素，并為其添加1象素的紅色邊框。

:playing {
    border : 1px solid grey;
}

匹配當前播放狀態的元素，并為其添加1象素的灰色邊框。

:enabled {
    color: red;
}

匹配啟用狀態的元素并設置其顏色為紅色。

:disabled{
    color: yellow;
}

匹配禁用狀態的元素并設置其顏色為黃色。

查看示例程序

:read-only {
    color: red;
}

匹配只讀狀態的元素并設置其顏色為紅色。

:read-write {
    color: yellow;
}

匹配讀寫狀態的元素并設置其顏色為黃色。

查看示例程序

:placeholder-shown {
    background: red;
}

選中占位符為顯示狀態的元素并設置其背景色為紅色。

查看示例程序

:default {
    color: red;
}

匹配缺省的元素并設置其顏色為紅色。

查看示例程序

:checked {
   height: 4em;
}

匹配選中的元素并將其高度設成 4em。

查看示例程序

不確定值偽類 :indeterminate 適用于其值處在不確定狀態的元素。例如 ： radio 元素組在未被初始選擇的情況下就為不確定值狀態。

:indeterminate {
  height: 4em;
}

匹配不確定值元素并設置高度為 4em。

查看示例程序

空值偽類 :blank 用來匹配輸入值為空的輸入框，如 textarea 或 input 框。

:blank {
    background: red;
}

目前該偽類兼容性較差。

:valid {        
    color: red;       
}

匹配輸入值合法的元素并設置其顏色為紅色。

:valid {        
    color:  blue;       
}

匹配輸入值不合法的元素并設置其顏色為藍色。

查看示例程序

:in-range {
   color: red;        
}

匹配輸入值在定義范圍內的元素并設置其顏色為紅色。

:out-of-range {
   color: blue;        
}

匹配輸入值不在定義范圍內的元素并設置其顏色為藍色。

查看示例程序

:required {            
    color: red;        
}

匹配定義為必填項的元素并設置其顏色為紅色。

:optional {            
    color: blue;        
}

匹配定義為選填項的元素并設置其顏色為藍色。

查看示例程序

偽類 :root 表示文檔的根元素。例如，在DOM文檔中，偽類 :root 與Document對象的根元素匹配。 在HTML中，就表示html元素。

:root {
    color: red;
}

匹配文檔根元素并定義其顏色為紅色。

查看示例程序

:empty {           
    color : red;
}

匹配為空的元素并設置其顏色為紅色。

查看示例程序

p:nth-child(3n+1) {
    color: red;
}

匹配第1，4，7，10等 p 元素并設置其顏色為紅色。

查看示例程序

p:nth-child(3n+1) {
    color: red;
}

匹配倒數第1，4，7，10等 p 元素并設置其顏色為紅色。

查看示例程序

p:first-child { 
    color: red;      
}

匹配第一個 p 元素并設置其顏色為紅色。

查看示例程序

p:last-child { 
    color: red;      
}

匹配最后一個 p 元素并設置其顏色為紅色。

查看示例程序

p:only-child { 
    color: red;      
}

匹配父元素只包含唯一子元素的元素 p 并設置其顏色為紅色。

查看示例程序

p:nth-of-type(3n+1) {        
    color: red;      
}

匹配類型為 p 的第1，4，7，10等索引位置的元素并設置其顏色為紅色。

查看示例程序

p:nth-last-of-type(3n+1) {        
    color: red;      
}

匹配類型為 p 的倒數第1，4，7，10等索引位置的元素并設置其顏色為紅色。

查看示例程序

p:first-of-type {        
    color: red;      
}

匹配第一個類型為 p 的元素并設置及顏色為紅色。

查看示例程序

p:last-of-type {        
    color: red;      
}

匹配倒數第一個類型為 p 的元素并設置及顏色為紅色。

查看示例程序

p:only-of-type {        
    color: red;      
}

匹配父元素只包含唯一類型為 p 子元素并設置其顏色為紅色。

查看示例程序

h1 {  color: red }
h2 {  color: red }
h3 {  color: red }
h4 {  color: red }

利用分組選則器，可以將上述CSS規則簡寫成下面的形式。

h1,h2,h3,h4 {  
    color: red 
}

上述兩種寫法效果相同。

偽類 :is() 是一個以多個選擇器做為參數的函數，匹配由其參數表示的元素。

目前兼容性較差。

*:is(:hover, :focus) {
    color: red;
} 

匹配偽類 hover 和 focus 的元素并設置其顏色為紅色。

負向邏輯組合偽類 :not() 是一個以多個選擇器做為參數的函數，匹配不在其參數表中的元素。

目前兼容性較差。

button:not([DISABLED])  {
    color : red;
}

匹配不包含 DISABLED 屬性的 button 元素并設置其顏色為紅色。

目前兼容性較差。

a:has(> img)  {
    border : 1px solid red;
}

匹配包含 img 子元素的超鏈接并設置其邊框為1象素紅色。

h1 em {
    color: red;
}

匹配 h1 的后代的 em 元素并設置其顏色為紅色。

查看示例程序

h1 > em {  
    color: red;
}

匹配 h1 的子元素 em 并設置其顏色為紅色。

查看示例程序

h1 + h2 {
    color: red;
}

匹配 h1 的相鄰兄弟元素 h2 并設置其顏色為紅色。

查看示例程序

h1 ~ h2 {
    color: red;
}

匹配 h1 的后面的同級結點 h2 并設置其顏色為紅色。

查看示例程序

W3C Working Draft : Selectors Level 4 - 21 November 2018

W3scool : CSS 選擇器參考手冊

菜鳥教程 ：CSS 選擇器

MDN : CSS Selectors

本文是@毛瑞依據CSS選擇器規范4擇取的部分CSS選擇器內容編寫而成。因本人水平有限，理解和翻譯時難免有偏差和錯誤，還請程序員朋友多多指正！

文中一些選擇器兼容性還很差，只能做為學習儲備，不適用于實際產品中運用。

費力原創十分不易，請大家轉載時一定要明確注明出處來自【三十課】！