?本博文介紹CSS3中新增的選擇器，包括屬性選擇器、結構偽類選擇器和偽元素選擇器，
1 屬性選擇器
屬性選擇器（[屬性]）可以根據元素的屬性和屬性值來對符合要求的元素進行選擇，
屬性選擇器的基礎語法如下表：
| 語法 | 說明 |
| 標簽[屬性] {} | 選擇有目標屬性的標簽 |
| 標簽[屬性="value"] {} | 選擇有目標屬性且屬性值為"value"的標簽 |
| 標簽[屬性^="x"] {} | 選擇有目標屬性且屬性值以"x"開頭的標簽 |
| 標簽[屬性$="x"] {} | 選擇有目標屬性且屬性值以"x"結尾的標簽 |
| 標簽[屬性*="x"] {} | 選擇有目標屬性且屬性值包含"x"的標簽 |
舉兩個實體：
① input[value] {} ：選擇具有value屬性的input標簽
② input[value="https://www.cnblogs.com/detailNew/archive/2023/04/03/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的基礎用法，
?轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549077.html
標籤：其他