學習《CSS選擇器Level-4》不徹底版

1 概述

1.1 前言

選擇器是CSS的核心組件。本文依據W3C的Selectors Level 4規範，歸納總結了Level1-Level4中絕大多數的選擇器，並作了簡單的語法說明及示例演示。但願對程序員有所助益。

2 元素選擇器

2.1 類型選擇器-h1

類型選擇器也能夠稱爲標籤名選擇器，會選中文檔中該類型元素的實例。

h1 {
    color: red;
}

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

查看示例程序

2.2 通配選擇器-*

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

* {
    color: red;
}

設置文檔中全部元素的顏色爲紅色。

3 屬性選擇器

3.1 屬性存在選擇器-[name]

h1[name] {
    color: red;
}

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

查看示例程序

3.2 屬性值選擇器

3.2.1 確切匹配-[title='cool']

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

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

查看示例程序

3.2.2 包含匹配-[title|='cool']

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

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

查看示例程序

3.2.3 頭部匹配-[title^='cool']

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

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

查看示例程序

3.3 屬性值子串選擇器

3.3.1 頭部匹配-[title^='cool']

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

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

查看示例程序

3.3.2 尾部匹配-[title$='cool']

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

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

查看示例程序

3.3.3 部分匹配-[title*='cool']

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

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

查看示例程序

3.4 類選擇器-.class

.red {      
    color: red;       
}

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

查看示例程序

3.5 ID選擇器-#id

#title {      
    color: red;       
}

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

查看示例程序

4 語言學僞類

4.1 方向性僞類:dir

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

:dir(ltr) {
    color: red;
}

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

查看示例程序

4.2 語言僞類:lang

:lang(fr) {
    color: red;
}

匹配語言爲法語的元素並設置其顏色爲紅色。

查看示例程序

5 位置僞類

5.1 超連接僞類:any-link

匹配帶有 href 屬性的 <a>、<link>、<area>等元素。

:any-link {
    color: red;
}

匹配任意超連接，並設置其顏色爲紅色。

查看示例程序

5.2 超連接僞類:link

:link {
    color: red;
}

匹配未被訪問的超連接，並設置其顏色爲紅色。

5.3 超連接僞類:visited

:visited {
    color: blue;
}

匹配訪問過的超連接，並設置其顏色爲藍色。

查看示例程序

5.4 超連接僞類:local-link

:local-link {
    color: red;
}

匹配本地超連接，並設置其顏色爲紅色。

5.5 目標僞類:target

<h1><a href="#content">三十課</a></h1>
<p id="content">程序員的筆記本</p>
<p id="content2">程序員的筆記本2</p>

:target {
    color: red;
}

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

6 用戶行爲僞類

6.1 用戶行爲僞類:hover

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

:hover {
    color: red;
}

用戶指針懸停於某元素，匹配該元素並將其設置其顏色爲紅色。

查看示例程序

6.2 用戶行爲僞類:active

:active {
    background: red;
}

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

查看示例程序

6.3 用戶行爲僞類:focus

:focus {
    background: red;
}

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

查看示例程序

6.4 用戶行爲僞類:focus-within

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

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

查看示例程序

7 時間軸僞類

7.1 時間僞類:current

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

:current(p) {
    color: red;
}

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

7.2 時間僞類:past

:past(p) {
    color: red;
}

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

7.3 時間僞類:future

:future(p) {
    color: yellow;
}

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

8 資源狀態僞類

8.1 資源狀態僞類:playing

:playing {
    border : 1px solid red;
}

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

8.2 資源狀態僞類:paused

:playing {
    border : 1px solid grey;
}

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

9 輸入僞類

9.1 輸入狀態控制僞類:enabled

:enabled {
    color: red;
}

匹配啓用狀態的元素並設置其顏色爲紅色。

9.2 輸入狀態控制僞類:disabled

:disabled{
    color: yellow;
}

匹配禁用狀態的元素並設置其顏色爲×××。

查看示例程序

9.3 只讀僞類:read-only

:read-only {
    color: red;
}

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

9.4 讀寫僞類:read-write

:read-write {
    color: yellow;
}

匹配讀寫狀態的元素並設置其顏色爲×××。

查看示例程序

9.5 僞類:placeholder-shown

:placeholder-shown {
    background: red;
}

選中佔位符爲顯示狀態的元素並設置其背景色爲紅色。

查看示例程序

9.6 缺省項僞類:default

:default {
    color: red;
}

匹配缺省的元素並設置其顏色爲紅色。

查看示例程序

9.7 選中項僞類:checked

:checked {
   height: 4em;
}

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

查看示例程序

9.8 不肯定值僞類:indeterminate

不肯定值僞類 :indeterminate 適用於其值處在不肯定狀態的元素。例如 ： radio 元素組在未被初始選擇的狀況下就爲不肯定值狀態。

:indeterminate {
  height: 4em;
}

匹配不肯定值元素並設置高度爲 4em。

查看示例程序

9.9 空值僞類:blank

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

:blank {
    background: red;
}

目前該僞類兼容性較差。

9.10 合規性驗證僞類:valid

:valid {        
    color: red;       
}

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

9.11 合規性驗證僞類:invalid

:valid {        
    color:  blue;       
}

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

查看示例程序

9.12 範圍僞類:in-range

:in-range {
   color: red;        
}

匹配輸入值在定義範圍內的元素並設置其顏色爲紅色。

9.13 範圍僞類:out-of-range

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

匹配輸入值不在定義範圍內的元素並設置其顏色爲藍色。

查看示例程序

9.14 必填項僞類:required

:required {            
    color: red;        
}

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

9.15 選填項僞類:optional

:optional {            
    color: blue;        
}

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

查看示例程序

10 樹形結構僞類

10.1 根結點僞類:root

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

:root {
    color: red;
}

匹配文檔根元素並定義其顏色爲紅色。

查看示例程序

10.2 空僞類:empty

:empty {           
    color : red;
}

匹配爲空的元素並設置其顏色爲紅色。

查看示例程序

10.3 元素索引僞類:nth-child

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

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

查看示例程序

10.4 元素索引僞類:nth-last-child

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

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

查看示例程序

10.5 首元素僞類:first-child

p:first-child { 
    color: red;      
}

匹配第一個 p 元素並設置其顏色爲紅色。

查看示例程序

10.6 尾元素僞類:last-child

p:last-child { 
    color: red;      
}

匹配最後一個 p 元素並設置其顏色爲紅色。

查看示例程序

10.7 惟一子元素僞類:only-child

p:only-child { 
    color: red;      
}

匹配父元素只包含惟一子元素的元素 p 並設置其顏色爲紅色。

查看示例程序

10.8 類型索引僞類:nth-of-type

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

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

查看示例程序

10.9 類型索引僞類:nth-last-of-type

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

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

查看示例程序

10.10 類型首元素僞類:first-of-type

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

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

查看示例程序

10.11 類型尾元素僞類:last-of-type

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

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

查看示例程序

10.12 惟一類型元素僞類:only-of-type

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

匹配父元素只包含惟一類型爲 p 子元素並設置其顏色爲紅色。

查看示例程序

11 邏輯組合選擇器

11.1 分組選擇器

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

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

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

上述兩種寫法效果相同。

11.2 邏輯組合僞類:is

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

目前兼容性較差。

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

匹配僞類 hover 和 focus 的元素並設置其顏色爲紅色。

11.3 邏輯組合僞類:not

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

目前兼容性較差。

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

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

11.4 邏輯組合僞類:has

目前兼容性較差。

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

匹配包含 img 子元素的超連接並設置其邊框爲1象素紅色。

12 組合選擇器

12.1 後代選擇器

h1 em {
    color: red;
}

匹配 h1 的後代的 em 元素並設置其顏色爲紅色。

查看示例程序

12.2 子元素選擇器->

h1 > em {  
    color: red;
}

匹配 h1 的子元素 em 並設置其顏色爲紅色。

查看示例程序

12.3 相鄰兄弟選擇器-+

h1 + h2 {
    color: red;
}

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

查看示例程序

12.4 兄弟選擇器-~

h1 ~ h2 {
    color: red;
}

匹配 h1 的後面的同級結點 h2 並設置其顏色爲紅色。

查看示例程序

13 結尾

13.1 參考文獻

W3C Working Draft : Selectors Level 4 - 21 November 2018

W3scool : CSS 選擇器參考手冊

菜鳥教程 ：CSS 選擇器

MDN : CSS Selectors

13.2 結語

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

文中一些選擇器兼容性還不好，只能作爲學習儲備，不適用於實際產品中運用。

費力原創十分不易，請你們轉載時必定要明確註明出處來自【三十課】！