本文小編為大家詳細(xì)介紹“css之偽類選擇器怎么使用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css之偽類選擇器怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比郁南網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式郁南網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋郁南地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

偽類選擇器

偽類選擇器是一種允許通過未包含在HTML元素的狀態(tài)信息來定位HTML元素的用法。偽類選擇器的具體用法就是向已有的選擇器增加關(guān)鍵字，表示定位的HTML元素的狀態(tài)信息。

通過偽類，開發(fā)者可以設(shè)置元素的動態(tài)狀態(tài)，例如懸停（hover）、點擊（active）以及文檔中不能通過其它選擇器選擇的元素（這些元素沒有 ID 或 class 屬性），例如第一個子元素（first-child）或者最后一個子元素（last-child）。

例如:hover偽類選擇器可以用來在用戶將鼠標(biāo)懸停在按鈕上時改變按鈕的顏色。如下示例代碼所示：

/* 所有用戶指針懸停的按鈕 */  
 button:hover {  
  color: blue;  
 }

偽類的名稱不區(qū)分大小寫，但需要以冒號:開頭。另外，偽類需要與 CSS 中的選擇器結(jié)合使用，語法格式如下：

選擇器:偽類 {  
  屬性 : 屬性值;  
 }

偽類選擇器的具體語法格式為 :偽類，這里一定不要忘記 :。

CSS 中提供了各種各樣的偽類，如下表所示：

偽類選擇器的分類

CSS 版本從第一版本發(fā)展到第三版本，提供的偽類選擇器的數(shù)量已經(jīng)很龐大了。尤其CSS3版本新增了大量的偽類選擇器。

偽類選擇器的數(shù)量這么多，為了更好地梳理偽類選擇器，我們可以按照用途的不同分為如下 5 種類型：

• 用戶行為偽類：指與用戶行為相關(guān)的一些偽類，例如，懸停:hover、按下:active以及獲取焦點:focus等。

• URL定位偽類：用于定位HTML頁面中的元素

• 輸入偽類：與表單控件相關(guān)的偽類

• 結(jié)構(gòu)偽類：主要用于定位目標(biāo)元素

• 邏輯組合偽類：用于邏輯操作的，例如:not()，就表示不是某元素。

1、用戶行為偽類--動態(tài)偽類選擇器

之所以稱為動態(tài)偽類選擇器，是因為它們根據(jù)條件的改變匹配元素，是相對于文檔的固定狀態(tài)來說的。隨著JavaScript廣泛用于修改文檔內(nèi)容和元素狀態(tài)，動態(tài)選擇器和靜態(tài)選擇器之間的界限越來越模糊，不過，動態(tài)偽類選擇器仍然是一類比較特別的選擇器。

：link 和：visited 選擇器

：link選擇器匹配超鏈接，：visited選擇器匹配用戶已經(jīng)訪問過得超鏈接。

使用：visited選擇器可以應(yīng)用到鏈接元素的屬性不多。你可以改變顏色和字體，不過僅此而已。

提示：：visited選擇器匹配用戶在所有頁面訪問過的href屬性為URL的任意鏈接，而不只是你的頁面。：visited最常見的用法就是針對已訪問的鏈接應(yīng)用某種樣式，從而讓它們跟未訪問的鏈接有所區(qū)別。比如我們看新聞，看過的新聞和沒有看過的新聞在首頁列表呈現(xiàn)的狀態(tài)是不一樣的，便于我們區(qū)分。

：hover 選擇器

：hover選擇器匹配用戶鼠標(biāo)懸停在其上的任意元素。

：active 選擇器

：active選擇器匹配當(dāng)前被用戶激活的元素（一般情況下為鼠標(biāo)點擊該元素）。

：focus 選擇器

：focus選擇器匹配獲得焦點的元素，常用于 input 元素。

2、結(jié)構(gòu)性偽類選擇器

使用結(jié)構(gòu)性偽類選擇器能夠根據(jù)元素在文檔中的位置選擇元素。這類選擇器都有一個冒號字符前綴（：），例如：empty。他們可以單獨使用，也可以跟其他選擇器組合使用，如p：empty。

結(jié)構(gòu)偽類選擇器類選擇器包含的內(nèi)容如下表所示：

CSS中的結(jié)構(gòu)偽類選擇器是根據(jù)HTML頁面中元素之間的關(guān)系來定位HTML元素，從而減少對HTML元素的id屬性和class屬性的依賴。

:first-child與:last-child

:first-child偽類用來定義一組兄弟元素的第一個元素而:last-child偽類則是定位一組兄弟元素的最后一個元素。

如下示例代碼展示了:first-child偽類和:last-child偽類的用法：

HTML結(jié)構(gòu)如下：

    
涂山紅紅
    
涂山蘇蘇
    
涂山蓉蓉
    
涂山雅雅

CSS代碼如下：

li:first-child {
    color: red;
}
li:last-child {
    color: blue;
}

代碼運行結(jié)果如下圖所示：

:first-child 偽類可以使用:nth-child(n)偽類改寫為:nth-child(1)，而:last-child偽類可以使用:nth-last-child(n)偽類改寫為:nth-last-child(1)。

:first-child偽類和:last-child偽類經(jīng)常會引起誤解。例如 li:first-child 是用來定位所有

狐妖小紅娘
涂山紅紅
涂山蘇蘇

CSS代碼如下：

p:first-of-type {
    color: red;
}

p:last-of-type {
    color: blue;
}

代碼運行結(jié)果如下圖所示：

:first-of-type偽類與:last-of-type偽類的用法一定要和:first-child偽類與:last-child偽類的用法區(qū)分開。以:first-of-type偽類和:first-child偽類為例來說明：

• :first-of-type偽類是定位一組同類型的兄弟元素中的第一個元素，不管這個元素在兄弟元素中的位置如何。

• :first-child偽類是定位一組兄弟元素中的第一個元素，這些兄弟元素不一定是同類型的。

如果將上述示例代碼中的:first-of-type偽類改寫為:first-child偽類的話，將不會生效。

:nth-child(n)與:nth-last-child(n)

:nth-child(n)偽類和:nth-last-child(n)偽類都是CSS3中新增的選擇器，這兩個選擇器的用法基本上是一致的。區(qū)別在于:nth-last-child(n)偽類是倒序方式定位元素，也就是說，:nth-last-child(n)偽類是從一組元素的結(jié)尾開始的。

接下來，主要以:nth-child(n)偽類為例進(jìn)行講解。:nth-child(n)偽類中的n參數(shù)的含義具有3種情況：

• 數(shù)字值：任意一個大于 0 的正整數(shù)。例如 #example td:nth-child(1) 表示定位ID為example的父元素下所有元素中的第一個元素。

• 關(guān)鍵字：odd表示奇數(shù)，等同于:nth-child(2n)；even表示偶數(shù)，等同于:nth-child(2n+1)。

• 格式為(an+b)公式：a表示周期的長度（步長 ），n表示計數(shù)器（從 0 開始 ），而b則表示偏移值。

如下示例代碼展示了:nth-child(n)偽類(實現(xiàn)表格隔行換色效果)的用法：

    
    
    
    
    



    
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
        
            
            
        
    
姓名
區(qū)域
梵云飛
西西域
歡都落蘭
南國
石寬
北山
涂山紅紅
涂山

代碼運行結(jié)果如下圖所示：

:nth-child(n)偽類的n參數(shù)用法中比較復(fù)雜的是使用(an+b)公式用法，如下示例列舉了一些公式用法：

• :nth-child(5n)：定位元素的序號是5[=5×1]、10[=5×2]、15[=5×3]等。

• :nth-child(3n+4)：定位元素的序號是4[=(3×0)+4]、7[=(3×1)+4]、10[=(3×2)+4]、13[=(3×3)+4] 等。

• :nth-child(-n+3)：定位元素的序號是3[=-0+3]、2[=-1+3]、1[=-2+3]。

:nth-child(n)偽類與:nth-last-child(n)偽類和:nth-of-type(n)偽類與:nth-last-of-type(n)偽類的區(qū)別，類似于:first-of-type偽類與:last-of-type偽類和:first-child偽類與:last-child偽類的區(qū)別。

:empty

:empty偽類是用來定位沒有任何子級元素或文本內(nèi)容的元素，其中文本內(nèi)容包含了空白。但是HTML的注釋是不影響:empty偽類定位元素的。

如下示例代碼展示了:empty偽類的用法：

    
    
    
    
    



    

    
這個元素的背景是粉色的
    

        
    

代碼運行結(jié)果如下圖所示：

:root

CSS中的:root偽類選擇器比較簡單，它代表的就是元素。

如下代碼展示的:root偽類的用法：

:root {
    height: 100vh;
    width: 100vw;
    background-color: dodgerblue;
}

代碼運行結(jié)果如下圖所示：

3、UI元素狀態(tài)偽類選擇器

使用UI偽類選擇器可以根據(jù)元素的狀態(tài)匹配元素，下方列表將簡單總結(jié)這類選擇器：

4、輸入偽類選擇器

關(guān)于表單輸入的偽類，主要介紹三種常用的，具體如下：

• :enabled和:disabled

• :read-only和:read-write

• :checked

:enabled和:disabled

:enabled和:disabled一這組偽類選擇器分別表示禁用狀態(tài)與可用狀態(tài)，這組為了使完全對立的。

:enabled偽類的實際用處并不大，因為大多元素默認(rèn)都是可用的，所以寫不寫意義并不大。

如下代碼展示了:enabled和:disabled的用法：

代碼運行結(jié)果如下所示：

由上圖我們看到禁用狀態(tài)的的背景顏色為灰色。

:read-only和:read-write

:read-only和:read-write一這組偽類選擇器分別表示只讀和可寫狀態(tài)，同樣的:read-write也很雞肋，因為默認(rèn)就是可讀寫，示例代碼如下所示：

代碼運行結(jié)果如下所示：

我們可以看到，只讀的的文字顏色為紅色。

:checked

:checked偽類可以說是眾多偽類選擇器中使用頻率很高的一個偽類選擇器，該選擇器表示選中的狀態(tài)，就比如下面這個例子：

關(guān)于:checked偽類，最佳實踐是配合元素來實現(xiàn)，現(xiàn)在我們就通過:checked和元素來實現(xiàn)一個開關(guān)的效果。

示例代碼如下：

運行效果如下所示：

5、邏輯組合偽類

:not()否定的偽類

• 優(yōu)先級為0，優(yōu)先級由括號中的表達(dá)式?jīng)Q定； :not(p)由p決定

• 可以不斷的級聯(lián)；
  input:not(:disabled):not(:read-only) {} ;表示處于不禁用，也不處于只讀的狀態(tài)

• 不可出現(xiàn)多個表達(dá)式，也不支持選擇符；
  li:not(li, od); 尚未支持

:not()的巨大的用處在于告別重置的問題；

重置web中的樣式，就好比我們在項目中經(jīng)常使用到的：添加.active類名來控制樣式的顯示與隱藏/改變樣式，往常的寫法都是：

.cs_li {
	display: none;
}
.cs_li.active {
	display: block;
}

而我們可以使用:not()偽類，可以更好的實現(xiàn)：

.cs_li:not(.active) {
	display: none;
}

在列表中的設(shè)置

.cs_li:not(:nth-of-type(5n)){
	margin-right: 10px; // 除5的倍數(shù)項都設(shè)置右邊的外邊距
}

.cs_li_a > img,
.cs_li_b > img,
.cs_li_c > img {
	display: none;
}

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img {
	display: none;
}

ol ol li,
ol ul li, 
ul ul li,
ul ol li {
	margin-left: 20px;
}

:is(ol, ul) :is(ol, ul) li{
	margin-left: 20px;
}

:where(.article, section) .conten {}
:where(#article, #section) .conten {