CSS3新增選擇器（屬性選擇器、結構偽類選擇器、偽元素選擇器）

葉疏鴻發表於2023-04-03
CSSS3
​本博文介紹CSS3中新增的選擇器，包括屬性選擇器、結構偽類選擇器和偽元素選擇器。

 1 屬性選擇器

屬性選擇器（[屬性]）可以根據元素的屬性和屬性值來對符合要求的元素進行選擇。

屬性選擇器的基礎語法如下表：

語法 說明
標籤[屬性] {} 選擇有目標屬性的標籤
標籤[屬性="value"] {} 選擇有目標屬性且屬性值為"value"的標籤
標籤[屬性^="x"] {} 選擇有目標屬性且屬性值以"x"開頭的標籤
標籤[屬性$="x"] {} 選擇有目標屬性且屬性值以"x"結尾的標籤
標籤[屬性*="x"] {} 選擇有目標屬性且屬性值包含"x"的標籤

舉兩個例項：

① input[value] {} ：選擇具有value屬性的input標籤

② input[value="123"] {} ：選擇value屬性值為"123"的input標籤

注意事項：

（1）屬性選擇器（即[屬性]）的權重是0,0,1,0；

（2）標籤[屬性] 的權重是標籤權重+屬性選擇器權重。

2 結構偽類選擇器（上）

首先是第一類常用的結構偽類選擇器，這類選擇器常用於根據父級選擇器來選擇裡面的子元素。

基礎語法如下表：

語法 說明
E:first-child 選擇父元素中的第一個子元素，若該元素為E，則選中，否則選擇器不生效
E:last-child 選擇父元素中的最後一個子元素，若該元素為E，則選中，否則選擇器不生效
E:nth-child(n) 根據n來選擇父元素中的子元素，若選中的子元素為E，則選中，否則選擇器不生效

注意，這類選擇器的選擇步驟如下：

（1）先給所有子元素從1開始進行編號；

（2）根據選擇器來進行選擇。如：E:first-child就選擇第一個子元素，如果這個子元素是E的話，那麼就選中了；但如果第一個子元素不是E的話，那麼這類選擇器就不會生效。

總之，這類選擇器是“先編號，再選擇，選擇的元素為E，則選中”。

可能語法太模糊？上例項：

① ul li:first-child ：選擇 ul 下的第1個子元素，若該元素為li，則選中該元素，否則不生效；

② ul li:nth-child(6)  ：選擇 ul 下的第6個子元素，若該元素為li，則選中該元素，否則不生效；

③ ul li:nth-child(2n) ：選擇 ul 下的所有第偶數個子元素（2n即為偶數），若其為 li 則選中。

接著，這裡還要對E:nth-child(n)這一基本語法按照 n 的分類進行詳細的說明：

E:nth-child(n)中 n 的型別 說明（選中的子元素為E則生效）
數字 選擇第n個子元素
關鍵字"even" 選擇所有第偶數個子元素
關鍵字"odd" 選擇所有第奇數個子元素
公式 根據公式進行選擇。注意：公式中的 n 從0開始計算，但子元素是從1開始計數的，因此第0個子元素是不存在的

當E:nth-child(n)中 n 的型別為“公式”時，提供以下例項供理解（n 從0開始計算）：

選擇器 說明（選中的子元素為E則生效）
E:nth-child(n) 選擇從第0個開始的所有子元素
E:nth-child(n+3) 選擇從第3個開始的所有子元素
E:nth-child(2n) 選擇所有第偶數個子元素
E:nth-child(2n+1) 選擇所有第奇數個子元素
E:nth-child(-n+3) 選擇前3個子元素

實際上，在日常使用中，由於nth-child(n)會給所有子元素進行編號（不管是不是E），因此E:nth-child(n) 中 n 的值和 E 作為子元素的位置往往是對應的（這樣選擇器才會生效）。

3 結構偽類選擇器（下）

接著是第二類常用的結構偽類選擇器，這類選擇器也用於根據父級選擇器來選擇裡面的子元素，但和第一類有些差別。

基礎語法如下表：

語法 說明
E:first-of-type 選擇父元素中的第一個子元素E
E:last-of-type 選擇父元素中的最後一個子元素E
E:nth-of-type(n) 根據n來選擇父元素中的子元素E

注意，這類選擇器的選擇步驟如下：

（1）先給所有子元素E從1開始進行編號；

（2）根據選擇器來進行選擇。如：E:first-of-type就選擇第一個子元素E。

直接上例項：

① div p:first-of-type ：選擇 div 下的第1個子元素p；

② div p:nth-of-type(2) ：選擇 div 下的第2個子元素p。

4 結構偽類選擇器的比較

  結構偽類選擇器 說明
不同點 :first-child、:last-child、:nth-child(n) 先給所有子元素編號，再選擇，選中若是E則選擇器有效，否則無效
:first-of-type、:last-of-type、:nth-of-type(n) 先給所有子元素E編號，再選擇，選中一定是E
共同點 結構偽類選擇器（如: first-child）的權重是0,0,1,0 E:first-child的權重是 E 的權重 + 0,0,1,0

5 偽元素選擇器

偽元素選擇器可以利用css建立新標籤，簡化HTML結構。

偽元素選擇器的基礎語法如下表：

語法 說明
E::before 在元素E內部的前面插入內容
E::after 在元素E內部的後面插入內容

需要注意的地方如下：

（1）建立的標籤屬於行內元素；

（2）新建立的元素在文件樹中找不到；

（3）before和after必須有content屬性；

（4）偽元素選擇器（::before 和 ::after）權重為0,0,0,1。

提供一個例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before{
            content: "前面的";
        }
        div::after{
            content: "後面的";
        }
    </style>
</head>
<body>
    <div>
        選擇器
    </div>
</body>
</html>

頁面效果如下：

可見，透過偽元素選擇器，div元素中的文字“選擇器”前後分別新增了文字“前面的”和“後面的”，這就是::before和::after的基礎用法。

​

相關文章