偽類與偽元素統(tǒng)稱為偽選擇器。

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

偽類的:first-child的舉例

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

代碼如下：

這里我們更換一種方法，不用添加類

我們直接設(shè)置第一個(gè)的:first-child偽類來(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)于偽類和偽元素使用單冒號(hào)還是雙冒號(hào)及注意事項(xiàng)

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

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

偽類只能使用單冒號(hào)(:)寫法。

注意

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

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

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

1. 狀態(tài)偽類

:link

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

:hover

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

:visited

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

:active

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

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

:focus

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

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

:not()

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

:first-child

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

:last-child

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

:first-of-type

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

:last-of-type

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

:nth-child()

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

【所有的nth偽類都接受一個(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類似，主要區(qū)別是它更具體了，只針對(duì)特定類型的元素

:nth-last-of-type

:only-child

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

:only-of-type

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

:target

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

3. 表單相關(guān)

:checked

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

:default

從表單中一組類似元素里選擇默認(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偽類選中

:required

選擇有required屬性的表單元素

:read-only

選擇用戶不能編輯的元素

:read-write

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

:scope

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

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

:dir

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

:lang

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

5. 其他

:root

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

:fullscreen

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

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

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

::before

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

::after

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

【對(duì)于偽元素::before和::after而言，屬性content是必須設(shè)置的，通過(guò)這個(gè)偽元素生成的內(nèi)容不能通過(guò)其他選擇符選中】

::first-letter

匹配元素中文本的首字母。被修飾的首字母不在文檔樹(shù)中

【::first-letter只在display屬性為block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用】

::first-line

匹配元素中第一行的文本。這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中。

5. 僅能使用雙冒號(hào)才生效

::selection

匹配被用戶選中或者處于高亮狀態(tài)的部分。在火狐瀏覽器使用時(shí)需要添加-moz前綴。

::placeholder

選擇表單元素中通過(guò)placeholder屬性設(shè)置的占位文本

::backdrop

在全屏元素后面生成的一個(gè)盒子，與:fullscreen偽類連用，修改全屏后元素的背景顏色(試驗(yàn)階段)

其中有一部分的偽類和偽元素選擇器處于試驗(yàn)階段，可以在Can I Use或其他網(wǎng)站檢查一下其兼容性。

好了，今天就是文匯軟件小編為大家分享的文章，如果喜歡小編的話就來(lái)文匯軟件來(lái)看小編更多的文章吧。