CSS 常用偽類和偽元素

本文首發(fā)于邊玉杰的技術(shù)博客

轉(zhuǎn)載請(qǐng)注明出處

偽類

一個(gè) CSS 偽類是以一個(gè)冒號(hào)（ : ）作為前綴，被添加到一個(gè)選擇器末尾的關(guān)鍵字抡锈，可以讓指定的元素在特定的狀態(tài)呈現(xiàn)指定的樣式匿刮。例如 :hover狼牺，當(dāng)用戶懸停在指定元素時(shí)峰档，可以在這個(gè)狀態(tài)給指定元素添加相應(yīng)的樣式禁添，是在 DOM 樹無法描述的狀態(tài)下才能給元素添加樣式撮胧。

首先，下方的正方形都沒有背景色：

image

1上荡、:first-child

:first-child 表示在一組兄弟元素中的第一個(gè)元素

/* 所有正方形都沒有背景色趴樱，因?yàn)榇藭r(shí)選中的是 <p> 標(biāo)簽*/
<div class="list">
     <p>.square 這是一個(gè)p標(biāo)簽</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

image

/* 第 1 個(gè)正方形有背景色，因?yàn)榇藭r(shí)選中的是第一個(gè) .square */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

image

2酪捡、:first-of-type

:first-of-type 表示一組兄弟元素中指定類型的第一個(gè)元素

/* :first-of-type 選擇在父元素中第一個(gè)出現(xiàn)的 .square
而不管其在兄弟內(nèi)的位置如何叁征，第一個(gè)正方形有背景色 */
<div class="list">
     <p>.square 這是一個(gè)p標(biāo)簽</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-of-type{
     background: orangered;
}

效果如下：

image

3、:last-child

:last-child 表示在一組兄弟元素中的最后一個(gè)元素（類似 :first-child）

/* :last-child 此時(shí)選中的是最后一個(gè) .square
最后一個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-child{
     background: orangered;
}

效果如下：

image

4逛薇、:last-of-type

:last-of-type 表示一組兄弟元素中指定類型的最后一個(gè)元素（類似 :first-of-type）

/* :last-of-type 選擇在父元素中最后一個(gè)出現(xiàn)的 .square
而不管其在兄弟內(nèi)的位置如何捺疼，最后一個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-of-type{
     background: orangered;
}

效果如下：

image

5、:not

:not 一個(gè)否定偽類永罚，用于匹配不符合參數(shù)選擇器的元素

/* 不含有 .not 的正方形有背景色*/
<div class="list">
     <div class="square not"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square not"></div>
</div>

.square:not(.not){
     background: orangered;
}

效果如下：

image

6啤呼、:nth-child(an+b)

:nth-child 這個(gè) CSS 偽類首先會(huì)找到當(dāng)前元素的兄弟元素，然后按照位置的先后順序從1開始排序呢袱，選擇的結(jié)果為第（an+b）個(gè)元素的集合（n=0官扣，1，2羞福，3...）惕蹄。如果 an+b 為 0，無法選中任何元素

6-1治专、:nth-child(4) 匹配位置為 4 的元素

/*第 3 個(gè)正方形有背景色 因?yàn)榈?3 個(gè)正方形在所有兄弟元素中排第 4 */
<div class="list">
     <p>.square 這是一個(gè)p標(biāo)簽</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

image

 /*此時(shí)第 4 個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

image

6-2卖陵、:nth-child(2n) 匹配位置為2、 4张峰、6泪蔫、8... 的元素，可以使用 :nth-child(even) 代替

/*第 2喘批、 4撩荣、6铣揉、8 個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n) {
     background: orangered;
}

效果如下：

image

6-3、:nth-child(2n+1) 匹配位置為1婿滓、 3老速、5、7... 的元素凸主，可以使用 :nth-child(odd) 代替

/*第 1、 3额湘、5卿吐、7 個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n+1) {
     background: orangered;
}

效果如下：

image

6-4、:nth-child(3n) 匹配位置為 3锋华、6嗡官、9... 的元素

/*第 3、6 個(gè)正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(3n) {
     background: orangered;
}

效果如下：

image

7毯焕、:nth-of-type(an+b)

:nth-of-type 與 nth-child 相似衍腥，不同之處在于它是只匹配特定類型的元素

<div class="list">
     <p>.square 這是一個(gè)p標(biāo)簽</p> 
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-of-type(4) {
     background: orangered;
}

效果如下：

image

8、:nth-last-child(an+b)

:nth-last-child 與 nth-child 相似纳猫，它是從最后一個(gè)子元素開始計(jì)數(shù)的

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

.square:nth-last-child(4) {
     background: orangered;
}

效果如下：

image

9婆咸、:nth-last-of-type

:nth-last-of-type 與 nth-of-type 相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

.square:nth-last-of-type(4) {
     background: orangered;
}

效果如下：

image

偽元素

偽元素的前綴是兩個(gè)冒號(hào) ( :: ) 芜辕，同樣是添加到選擇器后面去選擇某個(gè)元素的某個(gè)部分尚骄。偽元素創(chuàng)建了不存在 DOM 樹中的元素，并為其添加樣式侵续。例如倔丈，::after 選擇元素后，在其內(nèi)容后使用 content 添加內(nèi)容状蜗。雖然可以看到添加的內(nèi)容需五，但是這些內(nèi)容實(shí)際上不存在 DOM 樹中

1、::after(:after)

使用 ::after 會(huì)創(chuàng)建一個(gè)偽元素轧坎，該偽元素會(huì)成為選中元素的最后一個(gè)子元素

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

p::after{
     content: "??";
}

效果如下：

image

2宏邮、::before(:before)

使用 ::before 會(huì)創(chuàng)建一個(gè)偽元素，該偽元素會(huì)成為選中元素的第一個(gè)子元素

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

p::before{
     content: "??";
}

效果如下：

image

3眶根、::first-letter(:first-letter)

::first-letter 選中某塊級(jí)元素第一行的第一個(gè)字母蜀铲，并且文字所處的行之前沒有其他內(nèi)容

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

p::first-letter{
     color: red;
}

效果如下：

image

4、::first-line(:first-line)

::first-line 在某塊級(jí)元素的第一行應(yīng)用樣式属百。第一行的長(zhǎng)度取決于很多因素记劝，包括元素寬度，文檔寬度和文本的文字大小族扰。和其他所有的偽元素一樣厌丑，::first-line 不能匹配任何真實(shí)存在的 html 元素定欧。::first-line 偽元素只能在塊容器中，所以怒竿，::first-line 偽元素只能在一個(gè) display 值為 block,砍鸠，inline-block，table-cell 或者 table-caption 中有用

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

p::first-line{
     color: red;
}

效果如下：

image

5耕驰、::selection

::selection 用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 這是一個(gè)p標(biāo)簽</p>
</div>

p::selection{
     background-color: #ffeb3b;
}

使用鼠標(biāo)選中亮字爷辱，效果圖：

image

兼容性

偽類的兼容性：

image

偽元素的兼容性：

image

元素兼容性查看

最后編輯于：2020.03.27 14:41:30

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市朦肘，隨后出現(xiàn)的幾起案子饭弓，更是在濱河造成了極大的恐慌，老刑警劉巖媒抠，帶你破解...
沈念sama閱讀 211,265評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件弟断，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡趴生，警方通過查閱死者的電腦和手機(jī)阀趴，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,078評(píng)論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來苍匆，“玉大人刘急，你說我怎么就攤上這事★鄙＃” “怎么了排霉？”我有些...
開封第一講書人閱讀 156,852評(píng)論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)民轴。經(jīng)常有香客問我攻柠，道長(zhǎng)，這世上最難降的妖魔是什么后裸？我笑而不...
開封第一講書人閱讀 56,408評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任瑰钮，我火速辦了婚禮，結(jié)果婚禮上微驶，老公的妹妹穿的比我還像新娘浪谴。我一直安慰自己，他們只是感情好因苹，可當(dāng)我...
茶點(diǎn)故事閱讀 65,445評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布苟耻。她就那樣靜靜地躺著，像睡著了一般扶檐。火紅的嫁衣襯著肌膚如雪凶杖。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,772評(píng)論 1贊 290
城市分裂傳說
那天款筑，我揣著相機(jī)與錄音智蝠，去河邊找鬼腾么。笑死，一個(gè)胖子當(dāng)著我的面吹牛杈湾，可吹牛的內(nèi)容都是我干的解虱。我是一名探鬼主播，決...
沈念sama閱讀 38,921評(píng)論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼漆撞，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼殴泰！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起叫挟，我...
開封第一講書人閱讀 37,688評(píng)論 0贊 266
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤艰匙，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后抹恳，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,130評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡署驻，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,467評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年奋献，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片旺上。...
茶點(diǎn)故事閱讀 38,617評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡瓶蚂，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出宣吱，到底是詐尸還是另有隱情窃这，我是刑警寧澤，帶...
沈念sama閱讀 34,276評(píng)論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布征候，位于F島的核電站杭攻，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏疤坝。R本人自食惡果不足惜兆解，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,882評(píng)論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望跑揉。院中可真熱鬧锅睛，春花似錦、人聲如沸历谍。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,740評(píng)論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)望侈。三九已至印蔬，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間甜无，已是汗流浹背扛点。一陣腳步聲響...
開封第一講書人閱讀 31,967評(píng)論 1贊 265
情欲美人皮
我被黑心中介騙來泰國(guó)打工哥遮，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人陵究。一個(gè)月前我還...
沈念sama閱讀 46,315評(píng)論 2贊 360
代替公主和親
正文我出身青樓眠饮，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親铜邮。傳聞我的和親對(duì)象是個(gè)殘疾皇子仪召，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,486評(píng)論 2贊 348

CSS 常用偽類和偽元素

偽類

1上荡、:first-child

2酪捡、:first-of-type

3、:last-child

4逛薇、:last-of-type

5、:not

6啤呼、:nth-child(an+b)

6-1治专、:nth-child(4) 匹配位置為 4 的元素

6-2卖陵、:nth-child(2n) 匹配位置為2、 4张峰、6泪蔫、8... 的元素，可以使用 :nth-child(even) 代替

6-3、:nth-child(2n+1) 匹配位置為1婿滓、 3老速、5、7... 的元素凸主，可以使用 :nth-child(odd) 代替

6-4、:nth-child(3n) 匹配位置為 3锋华、6嗡官、9... 的元素

7毯焕、:nth-of-type(an+b)

8、:nth-last-child(an+b)

9婆咸、:nth-last-of-type

偽元素

1、::after(:after)

2宏邮、::before(:before)

3眶根、::first-letter(:first-letter)

4、::first-line(:first-line)

5耕驰、::selection

兼容性

偽類的兼容性：

偽元素的兼容性：

推薦閱讀更多精彩內(nèi)容