1 概述

1.1 前言

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

2 元素選擇器

2.1 類型選擇器-h1

類型選擇器也可以稱為標(biāo)簽名選擇器，會(huì)選中文檔中該類型元素的實(shí)例。

h1 {color: red; } 復(fù)制代碼

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

查看示例程序

2.2 通配選擇器-*

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

* {color: red; } 復(fù)制代碼

設(shè)置文檔中所有元素的顏色為紅色。

3 屬性選擇器

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

h1[name] {color: red; } 復(fù)制代碼

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

查看示例程序

3.2 屬性值選擇器

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

h1[title='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

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

h1[title~='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

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

h1[title|='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

3.3 屬性值子串選擇器

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

h1[title^='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

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

h1[title$='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

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

h1[title*='cool'] {color: red; } 復(fù)制代碼

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

查看示例程序

3.4 類選擇器-.class

.red { color: red; } 復(fù)制代碼

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

查看示例程序

3.5 ID選擇器-#id

#title { color: red; } 復(fù)制代碼

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

查看示例程序

4 語言學(xué)偽類

4.1 方向性偽類:dir

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

:dir(ltr) {color: red; } 復(fù)制代碼

匹配文字方向?yàn)閺淖蟮接业脑亍?/p>

查看示例程序

4.2 語言偽類:lang

:lang(fr) {color: red; } 復(fù)制代碼

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

查看示例程序

5 位置偽類

5.1 超鏈接偽類:any-link

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

:any-link {color: red; } 復(fù)制代碼

匹配任意超鏈接，并設(shè)置其顏色為紅色。

查看示例程序

5.2 超鏈接偽類:link

:link {color: red; } 復(fù)制代碼

匹配未被訪問的超鏈接，并設(shè)置其顏色為紅色。

5.3 超鏈接偽類:visited

:visited {color: blue; } 復(fù)制代碼

匹配訪問過的超鏈接，并設(shè)置其顏色為藍(lán)色。

查看示例程序

5.4 超鏈接偽類:local-link

:local-link {color: red; } 復(fù)制代碼

匹配本地超鏈接，并設(shè)置其顏色為紅色。

5.5 目標(biāo)偽類:target

<h1><a href="#content">三十課</a></h1> <p id="content">程序員的筆記本</p> <p id="content2">程序員的筆記本2</p> 復(fù)制代碼:target {color: red; } 復(fù)制代碼

點(diǎn)擊 html 代碼中的內(nèi)部鏈接，鏈接的目標(biāo)對(duì)象 id 為 content 的 p元素顏色變?yōu)榧t色。

6 用戶行為偽類

6.1 用戶行為偽類:hover

用戶指針設(shè)備懸停于指定元素時(shí)，匹配該元素。

:hover {color: red; } 復(fù)制代碼

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

查看示例程序

6.2 用戶行為偽類:active

:active {background: red; } 復(fù)制代碼

當(dāng)特定元素處于激活狀態(tài)時(shí)，設(shè)置元素背景色為紅色。

查看示例程序

6.3 用戶行為偽類:focus

:focus {background: red; } 復(fù)制代碼

當(dāng)特定元素獲得焦點(diǎn)，設(shè)置元素背景色為紅色。

查看示例程序

6.4 用戶行為偽類:focus-within

div:focus-within { border : 1px solid blue; } 復(fù)制代碼

當(dāng)div中的子元素獲得輸入焦點(diǎn)時(shí)，設(shè)置div元素邊框?yàn)?象素值的藍(lán)色邊框。

查看示例程序

7 時(shí)間軸偽類

7.1 時(shí)間偽類:current

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

:current(p) {color: red; } 復(fù)制代碼

以上規(guī)則定義了當(dāng)前語音渲染段落的顏色為紅色。

7.2 時(shí)間偽類:past

:past(p) {color: red; } 復(fù)制代碼

以上規(guī)則定義了以完成語音渲染段落的顏色為藍(lán)色。

7.3 時(shí)間偽類:future

:future(p) {color: yellow; } 復(fù)制代碼

以上規(guī)則定義了以未進(jìn)行語音渲染段落的顏色為黃色。

8 資源狀態(tài)偽類

8.1 資源狀態(tài)偽類:playing

:playing {border : 1px solid red; } 復(fù)制代碼

匹配當(dāng)前播放狀態(tài)的元素，并為其添加1象素的紅色邊框。

8.2 資源狀態(tài)偽類:paused

:playing {border : 1px solid grey; } 復(fù)制代碼

匹配當(dāng)前播放狀態(tài)的元素，并為其添加1象素的灰色邊框。

9 輸入偽類

9.1 輸入狀態(tài)控制偽類:enabled

:enabled {color: red; } 復(fù)制代碼

匹配啟用狀態(tài)的元素并設(shè)置其顏色為紅色。

9.2 輸入狀態(tài)控制偽類:disabled

:disabled{color: yellow; } 復(fù)制代碼

匹配禁用狀態(tài)的元素并設(shè)置其顏色為黃色。

查看示例程序

9.3 只讀偽類:read-only

:read-only {color: red; } 復(fù)制代碼

匹配只讀狀態(tài)的元素并設(shè)置其顏色為紅色。

9.4 讀寫偽類:read-write

:read-write {color: yellow; } 復(fù)制代碼

匹配讀寫狀態(tài)的元素并設(shè)置其顏色為黃色。

查看示例程序

9.5 偽類:placeholder-shown

:placeholder-shown {background: red; } 復(fù)制代碼

選中占位符為顯示狀態(tài)的元素并設(shè)置其背景色為紅色。

查看示例程序

9.6 缺省項(xiàng)偽類:default

:default {color: red; } 復(fù)制代碼

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

查看示例程序

9.7 選中項(xiàng)偽類:checked

:checked {height: 4em; } 復(fù)制代碼

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

查看示例程序

9.8 不確定值偽類:indeterminate

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

:indeterminate {height: 4em; } 復(fù)制代碼

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

查看示例程序

9.9 空值偽類:blank

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

:blank {background: red; } 復(fù)制代碼

目前該偽類兼容性較差。

9.10 合規(guī)性驗(yàn)證偽類:valid

:valid { color: red; } 復(fù)制代碼

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

9.11 合規(guī)性驗(yàn)證偽類:invalid

:valid { color: blue; } 復(fù)制代碼

匹配輸入值不合法的元素并設(shè)置其顏色為藍(lán)色。

查看示例程序

9.12 范圍偽類:in-range

:in-range {color: red; } 復(fù)制代碼

匹配輸入值在定義范圍內(nèi)的元素并設(shè)置其顏色為紅色。

9.13 范圍偽類:out-of-range

:out-of-range {color: blue; } 復(fù)制代碼

匹配輸入值不在定義范圍內(nèi)的元素并設(shè)置其顏色為藍(lán)色。

查看示例程序

9.14 必填項(xiàng)偽類:required

:required { color: red; } 復(fù)制代碼

匹配定義為必填項(xiàng)的元素并設(shè)置其顏色為紅色。

9.15 選填項(xiàng)偽類:optional

:optional { color: blue; } 復(fù)制代碼

匹配定義為選填項(xiàng)的元素并設(shè)置其顏色為藍(lán)色。

查看示例程序

10 樹形結(jié)構(gòu)偽類

10.1 根結(jié)點(diǎn)偽類:root

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

:root {color: red; } 復(fù)制代碼

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

查看示例程序

10.2 空偽類:empty

:empty { color : red; } 復(fù)制代碼

匹配為空的元素并設(shè)置其顏色為紅色。

查看示例程序

10.3 元素索引偽類:nth-child

p:nth-child(3n+1) {color: red; } 復(fù)制代碼

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

查看示例程序

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

p:nth-child(3n+1) {color: red; } 復(fù)制代碼

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

查看示例程序

10.5 首元素偽類:first-child

p:first-child { color: red; } 復(fù)制代碼

匹配第一個(gè) p 元素并設(shè)置其顏色為紅色。

查看示例程序

10.6 尾元素偽類:last-child

p:last-child { color: red; } 復(fù)制代碼

匹配最后一個(gè) p 元素并設(shè)置其顏色為紅色。

查看示例程序

10.7 唯一子元素偽類:only-child

p:only-child { color: red; } 復(fù)制代碼

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

查看示例程序

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

p:nth-of-type(3n+1) { color: red; } 復(fù)制代碼

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

查看示例程序

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

p:nth-last-of-type(3n+1) { color: red; } 復(fù)制代碼

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

查看示例程序

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

p:first-of-type { color: red; } 復(fù)制代碼

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

查看示例程序

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

p:last-of-type { color: red; } 復(fù)制代碼

匹配倒數(shù)第一個(gè)類型為 p 的元素并設(shè)置及顏色為紅色。

查看示例程序

10.12 唯一類型元素偽類:only-of-type

p:only-of-type { color: red; } 復(fù)制代碼

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

查看示例程序

11 邏輯組合選擇器

11.1 分組選擇器

h1 { color: red } h2 { color: red } h3 { color: red } h4 { color: red } 復(fù)制代碼

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

h1,h2,h3,h4 { color: red } 復(fù)制代碼

上述兩種寫法效果相同。

11.2 邏輯組合偽類:is

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

目前兼容性較差。

*:is(:hover, :focus) {color: red; } 復(fù)制代碼

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

11.3 邏輯組合偽類:not

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

目前兼容性較差。

button:not([DISABLED]) {color : red; } 復(fù)制代碼

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

11.4 邏輯組合偽類:has

目前兼容性較差。

a:has(> img) {border : 1px solid red; } 復(fù)制代碼

匹配包含 img 子元素的超鏈接并設(shè)置其邊框?yàn)?象素紅色。

12 組合選擇器

12.1 后代選擇器

h1 em {color: red; } 復(fù)制代碼

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

查看示例程序

12.2 子元素選擇器->

h1 > em { color: red; } 復(fù)制代碼

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

查看示例程序

12.3 相鄰兄弟選擇器-+

h1 + h2 {color: red; } 復(fù)制代碼

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

查看示例程序

12.4 兄弟選擇器-~

h1 ~ h2 {color: red; } 復(fù)制代碼

匹配 h1 的后面的同級(jí)結(jié)點(diǎn) h2 并設(shè)置其顏色為紅色。

查看示例程序

13 結(jié)尾

13.1 參考文獻(xiàn)

W3C Working Draft : Selectors Level 4 - 21 November 2018

W3scool : CSS 選擇器參考手冊(cè)

菜鳥教程 ：CSS 選擇器

MDN : CSS Selectors

13.2 結(jié)語

本文是@毛瑞依據(jù)CSS選擇器規(guī)范4擇取的部分CSS選擇器內(nèi)容編寫而成。因本人水平有限，理解和翻譯時(shí)難免有偏差和錯(cuò)誤，還請(qǐng)程序員朋友多多指正！

文中一些選擇器兼容性還很差，只能做為學(xué)習(xí)儲(chǔ)備，不適用于實(shí)際產(chǎn)品中運(yùn)用。

費(fèi)力原創(chuàng)十分不易，請(qǐng)大家轉(zhuǎn)載時(shí)一定要明確注明出處來自【三十課】！

轉(zhuǎn)載于:https://juejin.im/post/5caef5d56fb9a0688360f754

總結(jié)

以上是生活随笔為你收集整理的学习《CSS选择器Level-4》不完全版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。