當(dāng)前位置：網(wǎng)站首頁(yè) /資料庫(kù)/前端知識(shí)

2021/05

CSS偽類(lèi)與偽元素的區(qū)別及用法

發(fā)布時(shí)間：2021-05-29 14:14:00

發(fā)布者：床頭的小熊

瀏覽量:

偽類(lèi)與偽元素統(tǒng)稱(chēng)為偽選擇器。

首先舉兩個(gè)簡(jiǎn)單地例子看一下區(qū)別

偽類(lèi)的:first-child的舉例

我們?nèi)绻胍op中的第一個(gè)span更改顏色，通常的做法就是向他添加一個(gè)類(lèi)，然后定義其樣式。

代碼如下：

這里我們更換一種方法，不用添加類(lèi)

我們直接設(shè)置第一個(gè)的:first-child偽類(lèi)來(lái)為它添加樣式。

這個(gè)時(shí)候，被修飾的元素依然處于文檔樹(shù)中，以上兩個(gè)方法的效果都是相同的。

下面來(lái)看偽元素的用法

偽元素的::first-letter的用法

同上一個(gè)例子的代碼

在這一段落中我們?nèi)绻胍o第一個(gè)字添加樣式，我們可以用再使用一個(gè)span包裹這個(gè)字，并為其設(shè)置樣式。

代碼如下：

如果我們不包裹它，我們可以用到::first-letter來(lái)為這一段的首字母設(shè)置樣式。

這樣的話就好像創(chuàng)建了一個(gè)虛擬的span并添加了樣式，但是實(shí)際在文檔樹(shù)中并不存在這個(gè)span，以上兩個(gè)方法的效果都是相同的。

關(guān)于偽類(lèi)和偽元素使用單冒號(hào)還是雙冒號(hào)及注意事項(xiàng)

在CSS3的標(biāo)準(zhǔn)中為了區(qū)分偽類(lèi)和偽元素，規(guī)定偽類(lèi)使用單冒號(hào)(:)，偽元素使用雙冒號(hào)(::)。

但是在此之前都是使用單冒號(hào)(:)的，所以偽元素既可以使用雙冒號(hào)(::)，同時(shí)也支持單冒號(hào)(:)的寫(xiě)法，但在考慮到瀏覽器的兼容問(wèn)題下，有部分瀏覽器不支持雙冒號(hào)的寫(xiě)法，因此設(shè)置的樣式不會(huì)生效，也可以依據(jù)個(gè)人習(xí)慣，單、雙冒號(hào)都是正確的寫(xiě)法。

偽類(lèi)只能使用單冒號(hào)(:)寫(xiě)法。

注意

使用偽類(lèi)是可以疊加的使用的，可以疊加多個(gè)只要不互斥，例：

使用偽元素就相對(duì)嚴(yán)格很多，它只能在一個(gè)元素上出現(xiàn)一次，而且只能在末尾出現(xiàn)，像下面這樣的寫(xiě)法樣式就不會(huì)生效。

簡(jiǎn)述偽類(lèi)選擇器的一些用法(其中分為5類(lèi))

1. 狀態(tài)偽類(lèi)

:link

鏈接的正常狀態(tài)，選擇那些尚未被點(diǎn)過(guò)的鏈接，這個(gè)偽類(lèi)也可以省略，直接在鏈接本身定義樣式

:hover

用戶(hù)指針懸停時(shí)生效，不只可以用于鏈接

:visited

選擇點(diǎn)擊過(guò)的鏈接

:active

選擇被鼠標(biāo)指針或觸摸操作激活的元素，也可以通過(guò)鍵盤(pán)來(lái)激活，只發(fā)生在鼠標(biāo)按下到被釋放的這段時(shí)間里

【上面四個(gè)注意順序，“LOVE”可以方便記憶，第一個(gè)一定是link，第四個(gè)一定是avtive，hover和visited順序可以隨意】

:focus

用于選擇已經(jīng)通過(guò)指針設(shè)備、觸摸或鍵盤(pán)獲得焦點(diǎn)的元素，在表單里使用得非常多

2. 結(jié)構(gòu)化偽類(lèi)

:not()

取反偽類(lèi)，它通過(guò)括號(hào)接受一個(gè)參數(shù)，一個(gè)“選擇符”。實(shí)際上，這個(gè)參數(shù)也可以是另一個(gè)偽類(lèi)。這個(gè)偽類(lèi)可以連綴使用，但不能包含別的:not選擇符。

:first-child

選擇父元素的第一個(gè)子元素

:last-child

選擇父元素的最后一個(gè)子元素

:first-of-type

選擇父容器內(nèi)任意類(lèi)型子元素的第一個(gè)元素

:last-of-type

選擇父容器內(nèi)任意類(lèi)型子元素的最后一個(gè)元素

:nth-child()

根據(jù)元素在標(biāo)記中的次序選擇相應(yīng)的元素

【所有的nth偽類(lèi)都接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)公式，公式可以是一個(gè)整數(shù)，或者關(guān)鍵字odd、even或者形如an+/-b的結(jié)構(gòu)】

:nth-last-child

根據(jù)元素在標(biāo)記中的反序選擇相應(yīng)的元素

:nth-of-type

與:nth-child類(lèi)似，主要區(qū)別是它更具體了，只針對(duì)特定類(lèi)型的元素

:nth-last-of-type

:only-child

選擇父元素中唯一的子元素

:only-of-type

選擇同級(jí)中類(lèi)型唯一的元素，與:only-child類(lèi)似，但針對(duì)特定類(lèi)型的元素，讓選擇符有了更強(qiáng)的意義

:target

通過(guò)元素的ID及URL中的錨名稱(chēng)選擇元素

3. 表單相關(guān)

:checked

選擇被勾選或選中的單選按鈕、多選按鈕及列表選項(xiàng)

:default

從表單中一組類(lèi)似元素里選擇默認(rèn)的元素

:disabled

選擇禁用狀態(tài)的表單元素。處于禁用狀態(tài)的元素，不能被選中、勾選，不能獲得焦點(diǎn)

:empty

選擇其中不包含任何內(nèi)容的空元素

:enabled

選擇啟用的元素

:in-range

選擇有范圍且值在指定范圍內(nèi)的元素

:out-of-range

選擇有范圍且值超出指定范圍的元素

:indeterminate

選擇單選按鈕或復(fù)選框在頁(yè)面加載時(shí)沒(méi)有被勾選的

:valid

選擇輸入格式符合要求的表單元素

:invalid

選擇輸入格式不符合要求的表單元素

:optional

選擇表單中非必填的輸入字段。換句話說(shuō)，只要輸入字段中沒(méi)有required屬性，就會(huì)被:optional偽類(lèi)選中

:required

選擇有required屬性的表單元素

:read-only

選擇用戶(hù)不能編輯的元素

:read-write

選擇用戶(hù)可以編輯的元素，適用于有contenteditable屬性的HTML元素

:scope

適用于style標(biāo)簽中有scoped屬性的情形，如果頁(yè)面中某一部分的style標(biāo)簽里沒(méi)有scoped屬性，那么:scope偽類(lèi)會(huì)一直向上查找，直到html元素，即當(dāng)前樣式表的默認(rèn)作用范圍。(試驗(yàn)階段)

4. 語(yǔ)言相關(guān)

:dir

選擇文檔中指定了語(yǔ)言方向的元素。換句話說(shuō)，為了使用:dir偽類(lèi)，需要在標(biāo)記中為相關(guān)元素指定dir屬性。語(yǔ)言方向目前有兩種：ltr（從左到右）和rtl（從右往左）。目前只有火狐支持該類(lèi)，在使用時(shí)需加前綴( -moz-dir() )

:lang

選擇的元素通過(guò)lang=""屬性、相應(yīng)的meta元素以及HTTP首部的協(xié)議信息來(lái)確定

5. 其他

:root

選擇文檔中最高層次的父元素

:fullscreen

選擇在全屏模式下顯示的元素，不適用于用戶(hù)按F11進(jìn)入的全屏模式，只適用于通過(guò)JavaScript Fullscreen API切換進(jìn)入的全屏模式，通常由父容器中的圖片、視頻或游戲來(lái)調(diào)用(試驗(yàn)階段)

簡(jiǎn)述偽元素選擇器的一些用法(其中分為2類(lèi))

1. 單雙冒號(hào)都可生效

::before

在被選元素前插入內(nèi)容

::after