CSS 高級(jí)選擇器完全指南

作者：CUGGZ 2023-03-16 10:20:55

在 CSS 中，選擇器是選取需設(shè)置樣式的元素的模式。今天就來(lái)看看 CSS 中的高級(jí)選擇器以及實(shí)用技巧！

一、基礎(chǔ)選擇器

在說(shuō)高級(jí)選擇器之前，先來(lái)回顧一下CSS中的基礎(chǔ)選擇器。

1、元素選擇器

最常見(jiàn)的 CSS 選擇器就是元素選擇器。選擇器通常將是某個(gè) HTML 元素：

h1 {
  color: red;
  font-size: 50px;
}

在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器（type selector）。類型選擇器匹配文檔語(yǔ)言元素類型的名稱。類型選擇器匹配文檔樹(shù)中該元素類型的每一個(gè)實(shí)例。

2、ID 選擇器

id 選擇器用來(lái)指定具有ID的元素的樣式。ID 選擇器前面有一個(gè) # 號(hào) - 也稱為棋盤號(hào)或井號(hào)。

#my_id {
  color: red;
  font-size: 50px;
}

需要注意，在一個(gè) HTML 文檔中，ID 選擇器會(huì)使用一次，而且僅一次。并且 ID 選擇器不能結(jié)合使用，因?yàn)?ID 屬性不允許有以空格分隔的詞列表。

3、類選擇器

CSS類選擇器會(huì)根據(jù)元素的類屬性中的內(nèi)容匹配元素。類屬性被定義為一個(gè)以空格分隔的列表項(xiàng)，在這組類名中，必須有一項(xiàng)與類選擇器中的類名完全匹配，此條樣式聲明才會(huì)生效。類選擇器也是我們最常用的選擇器之一。

.my_class {
  color: red;
  font-size: 50px;
}

二、通配選擇器

在CSS中，一個(gè)星號(hào)(*)就是一個(gè)通配選擇器，之所以如此命名，是因?yàn)樗毡檫m用于所有元素，可以匹配任意類型的HTML元素。那通配符選擇器有啥實(shí)際應(yīng)用呢？其會(huì)常用于全局樣式重置，比如 CSS 盒子模型重置：

*,
*::before,
*::after {
  box-sizing: border-box;
}

這意味著我們希望所有元素在盒子模型計(jì)算中包括padding和border，而不是將這些寬度添加到任何定義的尺寸。例如，在以下規(guī)則中，.box寬度將是200px，而不是200px + 20px：

.box {
  width: 200px;
  padding: 10px;
}

三、屬性選擇器

CSS 屬性選擇器通過(guò)已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓亍＿@是一個(gè)非常強(qiáng)大的選擇器，但是通常沒(méi)有充分發(fā)揮其潛力。CSS 屬性選擇器可以獲得類似于正則表達(dá)式的匹配結(jié)果。這對(duì)于修改 BEM 風(fēng)格的系統(tǒng)或其他使用相關(guān)類名但可能不是單個(gè)通用類名的框架非常有用。來(lái)看一個(gè)例子：

[class*="component_"]

這個(gè)選擇器將選擇所有具有包含 component_ 字符串的類的元素。

可以通過(guò)在關(guān)閉屬性選擇器之前包含 i 來(lái)確保匹配不區(qū)分大小寫：

[class*="component_" i]

當(dāng)然我們也可以不指定屬性值，而是簡(jiǎn)單的檢查它是否存在，例如下面的選擇器會(huì)選擇具有任何class值的所有 a 標(biāo)簽：

a[class]

屬性選擇器可以用來(lái)執(zhí)行一些基本的可訪問(wèn)性檢查，例如：

img:not([alt]) {
  outline: 2px solid red;
}

這將為所有不包含 alt 屬性的圖像添加輪廓。

四、子代選擇器

當(dāng)使用 > 選擇符分隔兩個(gè)元素時(shí)，它只會(huì)匹配那些作為第一個(gè)元素的直接后代(子元素)的第二元素。子組合選擇器是唯一處理元素級(jí)別的選擇器，并且可以組合以選擇嵌套元素。

? 選擇 article > p。

<article>
  <p>Hello world</p>
</article>

?? 未選擇 article > p。

<article>
  <blockquote>
    <p>Hello world</p>
  </blockquote>
</article>

有一個(gè)側(cè)邊欄導(dǎo)航列表，從語(yǔ)義上講，這會(huì)是一個(gè)包含 li 元素的 ul 元素列表。我們可能希望頂層鏈接的樣式與嵌套鏈接的樣式不同。要僅針對(duì)頂級(jí)鏈接，可以使用以下選項(xiàng)：

nav > ul > li > a {
  font-weight: bold;
}

五、通用兄弟選擇器

兄弟選擇符，位置無(wú)須緊鄰，只需同層級(jí)，A~B 選擇A元素之后所有同層級(jí)B元素。

例如，p~img 將為位于段落后面某個(gè)位置的所有圖像設(shè)置樣式，前提是它們屬于同一個(gè)父元素：

<article>
  <p>Paragraph</p>
  <h2>Headline 2</h2>
  <img src="img.png" alt="Image" />
  <h3>Headline 3</h3>
  <img src="img.png" alt="Image" />
</article>

將通用兄弟選擇器與有狀態(tài)偽類選擇器（如：checked）相結(jié)合，可以產(chǎn)生有趣的效果。復(fù)選框的HTML結(jié)構(gòu)如下：

<input id="terms" type="checkbox" />
<label for="terms">terms</label>

只有選中復(fù)選框之后下面的樣式才會(huì)生效：

#terms:checked ~ p {
  font-style: italic;
  color: #797979;
}

六、相鄰兄弟選擇器

相鄰兄弟選擇器 (+) 介于兩個(gè)選擇器之間，當(dāng)?shù)诙€(gè)元素_緊跟在_第一個(gè)元素之后，并且兩個(gè)元素都是屬于同一個(gè)父元素的子元素，則第二個(gè)元素將被選中。

當(dāng)我們想給一個(gè)列表之間添加間隙時(shí)，最常用的方式是給每個(gè)元素添加一個(gè)外邊距，但是這樣就還需要去除第一個(gè)元素的外邊距。我們可以使用相鄰兄弟選擇器來(lái)協(xié)助添加外邊距：

nav ul li + li {
  margin-left: 2rem;
}

這樣就可以在列表項(xiàng)之間產(chǎn)生間隙效果，而無(wú)需在第一個(gè)項(xiàng)目上清除額外的邊距。

除此之外，我們還可以使用相鄰兄弟選擇器方便得給label標(biāo)簽和表單標(biāo)簽之間添加間隙：

label + input {
  margin-left: 10px;
}

七、偽類選擇器

CSS 偽類是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。這些極大地增強(qiáng)了 CSS 的功能，并啟用了過(guò)去經(jīng)常被錯(cuò)誤地歸入 JavaScript 的功能。

下面這些偽類選擇器是有狀態(tài)的：選擇器是有狀態(tài)的：

:focus
:hover
:visited
:target
:checked

以下選擇器依賴于元素順序：

:nth-child()、:nth-of-type()
:first-child、:first-of-type
:last-child、:last-of-type
:only-child、:only-of-type

還有一些非常有用的偽類比如:not()，新支持的偽類:is()，以及隨著 CSS 自定義屬性（變量）的支持而出現(xiàn)在偽類:root。

nth系列的選擇器有著很多應(yīng)用，比如想實(shí)現(xiàn)一個(gè)交投背景色的表格，就可以使用nth-child選擇器，使用even（偶數(shù)行）或者odd（奇數(shù)行）關(guān)鍵字即可：

tbody tr:nth-child(odd) {
  background-color: #ddd;
}

效果如下：

當(dāng)然也可以自己指定間隔規(guī)則：

li:nth-child(3n + 1) {
  background-color: rebeccapurple;
}

這將第一個(gè)元素開(kāi)始，每隔每三個(gè)元素選一個(gè)：

我們可以使用:not()選擇器從選擇器中排除元素，上面我們就使用a:not([class])來(lái)定位沒(méi)有應(yīng)用class的鏈接。我們可以鏈接:not()選擇器使用，如果想為表單字段輸入創(chuàng)建規(guī)則，但不是某些類型就可以這樣寫：

input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"])

也可以在:not()中包含其他偽類選擇器，例如排除:disabled狀態(tài)的按鈕：

button: not(: disabled);

八、偽元素選擇器

偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許對(duì)被選擇元素的特定部分修改樣式。它們?cè)趹?yīng)用中差異很大，目前最受支持的偽元素選擇器如下：

::after
::before
::first-letter
::first-line
::selection

::before 和 ::after 偽元素可以用來(lái)創(chuàng)建一個(gè)額外的元素，它們?cè)谝曈X(jué)上似乎是DOM的一部分，但不是真正的HTMLDOM的一部分。由于它們的行為類似于真實(shí)元素，所以在使用flexbox或grid布局時(shí)，它們會(huì)被計(jì)算為子元素，這大大增強(qiáng)了它們的功能。

在使用::before 和 ::after之前需要了解兩個(gè)重要的概念：

在使其可見(jiàn)之前需要設(shè)置content屬性，此屬性可以設(shè)置為空字符串；
一般情況下，::before將顯示在主元素內(nèi)容之前，而::after將顯示在其之后。

默認(rèn)情況下，它們的行為類似于內(nèi)聯(lián)元素：

當(dāng)給段落添加 display:flex 之后的效果如下：

切換為display:grid的效果如下：

我們可以使用偽元素::selection來(lái)定義選中文本的樣式：

::selection {
  background: yellow;
  color: black;
}

責(zé)任編輯：姜華來(lái)源：前端充電寶

CSS 選擇器