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
13.2 結語
本文是@毛瑞依據CSS選擇器規範4擇取的部分CSS選擇器內容編寫而成。因本人水平有限,理解和翻譯時難免有偏差和錯誤,還請程序員朋友多多指正!
文中一些選擇器兼容性還很差,只能做爲學習儲備,不適用於實際產品中運用。
費力原創十分不易,請大家轉載時一定要明確註明出處來自【三十課】!