熟悉前端的人都會聽過 css 的偽類與偽元素，然而大多數(shù)的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發(fā)，區(qū)分這兩者的區(qū)別，并且列出大部分偽類與偽元素的具體用法，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。

偽類與偽元素

先說一說為什么 css 要引入偽元素和偽類，以下是 css2.1 Selectors 章節(jié)中對偽類與偽元素的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直譯過來就是：css 引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進(jìn)行解釋：

偽類用于當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當(dāng)用戶懸停在指定的元素時，我們可以通過:hover 來描述這個元素的狀態(tài)。雖然它和普通的 css 類相似，可以為已有的元素添加樣式，但是它只有處于 dom 樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before 來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中。

偽類與偽元素的區(qū)別

這里通過兩個例子來說明兩者的區(qū)別。

下面是一個簡單的 html 列表片段：

• 我是第一個
• 我是第二個

如果想要給第一項添加樣式，可以在為第一個

添加一個類，并在該類中定義對應(yīng)樣式：

HTML:

• 我是第一個
• 我是第二個

CSS:

li.first-item { color: orange}

如果不用添加類的方法，我們可以通過給設(shè)置第一個

的:first-child 偽類來為其添加樣式。這個時候，被修飾的 元素依然處于文檔樹中。

CSS:

li:first-child { color: orange}

下面是另一個簡單的 html 段落片段：

Hello World, and wish you have a good day!

如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個 元素，并設(shè)置該 span 元素的樣式

HTML:

Hello World, and wish you have a good day!

CSS:

.first { font-size: 5em;}

如果不創(chuàng)建一個 元素，我們可以通過設(shè)置

的:first-letter 偽元素來為其添加樣式。這個時候，看起來好像是創(chuàng)建了一個虛擬的 元素并添加了樣式，但實(shí)際上文檔樹中并不存在這個 元素。

CSS:

p:first-letter { font-size: 5em;}

從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。

偽元素是使用單冒號還是雙冒號？

CSS3 規(guī)范中的要求使用雙冒號 (::) 表示偽元素，以此來區(qū)分偽元素和偽類，比如::before 和::after 等偽元素使用雙冒號 (::)，:hover 和:active 等偽類使用單冒號 (:)。除了一些低于 IE8 版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號 (::) 表示方法。

然而，除了少部分偽元素，如::backdrop 必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after 也可以正確運(yùn)行。

對于偽元素是使用單冒號還是雙冒號的問題，w3c 標(biāo)準(zhǔn)中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { ... }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：雖然 CSS3 標(biāo)準(zhǔn)要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。

實(shí)際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。

偽類與偽元素的具體用法

這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據(jù)用途分類的偽類總結(jié)圖和根據(jù)冒號分類的偽元素總結(jié)圖：

某些偽類或偽元素仍然處于試驗(yàn)階段，在使用前建議先在 Can I Use 等網(wǎng)站查一查其瀏覽器兼容性。接下來，我們會一一列舉每種用法的具體運(yùn)用，大家可以更直觀的理解和記憶，處于試驗(yàn)階段的偽類或偽元素會在標(biāo)題中標(biāo)注。

偽類

狀態(tài)

由于狀態(tài)偽類的用法大家都十分熟悉，這里就不用例子說明了。

1 :link

選擇未訪問的鏈接

2 :visited

選擇已訪問的鏈接

3 :hover

選擇鼠標(biāo)指針浮動在其上的元素

4 :active

選擇活動的鏈接

5 :focus

選擇獲取焦點(diǎn)的輸入字段

結(jié)構(gòu)化

1 :not

一個否定偽類，用于匹配不符合參數(shù)選擇器的元素。

如下例，除了第一個

元素外，其他 元素的文本都會變?yōu)槌壬?p>HTML:

• 一些文本
• 一些文本
• 一些文本
• 一些文本

CSS:

li:not(.first-item) { color: orange;}

2 :first-child

匹配元素的第一個子元素。

如下例，第一個

元素的文本會變?yōu)槌壬?p>HTML:

• 這里的文本是橙色的
• 一些文本
• 一些文本

CSS:

li:first-child { color: orange;}

3 : last-child

匹配元素的最后一個子元素。

如下例，最后一個

元素的文本會變?yōu)槌壬?p>HTML:

• 一些文本
• 一些文本
• 這里的文本是橙色的

CSS:

li:last-child { color: orange;}

4 first-of-type

匹配屬于其父元素的首個特定類型的子元素的每個元素。

如下例，第一個

元素和第一個元素的文本會變?yōu)槌壬?p>HTML:

• 這里的文本是橙色的
• 一些文本 這里的文本是橙色的
• 一些文本

CSS:

ul :first-of-type { color: orange;}

5 :last-of-type

匹配元素的最后一個子元素。

如下例，最后一個

元素的文本會變?yōu)槌壬?p>HTML:

• 一些文本一些文本 這里的文本是橙色的
• 一些文本
• 這里的文本是橙色的

CSS:

ul :last-of-type { color: orange;}

6 :nth-child

:nth-child 根據(jù)元素的位置匹配一個或者多個元素，它接受一個 an+b 形式的參數(shù)，an+b 匹配到的元素示例如下：

• 1n+0，或 n，匹配每一個子元素。
• 2n+0，或 2n，匹配位置為 2、4、6、8… 的子元素，該表達(dá)式與關(guān)鍵字 even 等價。
• 2n+1 匹配位置為 1、3、5、7… 的子元素、該表達(dá)式與關(guān)鍵字 odd 等價。
• 3n+4 匹配位置為 4、7、10、13… 的子元素。

如下例，有以下 HTML 列表：

Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa

CSS:

選擇第二個元素，”Beta” 會變成橙色：

ol :nth-child(2) { color: orange;}

選擇位置序號是 2 的倍數(shù)的元素，”Beta”, “Delta”, “Zeta”, “kappa” 會變成橙色:

ol :nth-child(2n) { color: orange;}

選擇位置序號為偶數(shù)的元素：

ol :nth-child(even) { color: orange;}

選擇從第 6 個開始，位置序號是 2 的倍數(shù)的元素，”Zeta”, “Theta”, “Kappa” 會變成橙色：

ol :nth-child(2n+6) { color: orange;}

7 :nth-last-child

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

8 :nth-of-type

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

如下例，第二個

元素會變?yōu)槌壬?/p>

HTML:

我是標(biāo)題

一些文本

這里的文本是橙色的

CSS:

p:nth-of-type(2) { color: orange;}

9 :nth-last-type

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

10 :only-child

當(dāng)元素是其父元素中唯一一個子元素時，:only-child 匹配該元素。

HTML:

• 這里的文本是橙色的

• 一些文本
• 一些文本

CSS:

ul :only-child { color: orange;}

11 :only-of-type

當(dāng)元素是其父元素中唯一一個特定類型的子元素時，:only-child 匹配該元素。

如下例，第一個 ul 元素只有一個 li 類型的元素，該 li 元素的文本會變?yōu)槌壬?/p>

HTML:

• 這里的文本是橙色的

這里不是橙色

• 一些文本
• 一些文本

CSS:

li:only-of-type { color: orange;}

12 :target

當(dāng) URL 帶有錨名稱，指向文檔內(nèi)某個具體的元素時，:target 匹配該元素。

如下例，url 中的 target 命中 id 值為 target 的 article 元素，article 元素的背景會變?yōu)辄S色。

URL:

http://example.com/#target

HTML:

:target pseudo-class

Lorem ipsum dolor sit amet, consectetur adipisicing elit!

CSS:

:target { background: yellow;}

表單相關(guān)

1 :checked

:checked 匹配被選中的 input 元素，這個 input 元素包括 radio 和 checkbox。

如下例，當(dāng)復(fù)選框被選中時，與其相鄰的 元素的背景會變成黃色。

HTML:

我同意

CSS:

input:checked + label { background: yellow;}

2 :default

:default 匹配默認(rèn)選中的元素，例如：提交按鈕總是表單的默認(rèn)按鈕。

如下例，只有提交按鈕的背景變成了黃色。

HTML:

重置 提交

CSS:

:default { background: yellow;}

3 :disabled

:disabled 匹配禁用的表單元素。

如下例，被禁用 input 輸入框的透明度會變成 50%。

HTML:

CSS:

:disabled { opacity: .5;}

4 :empty

:empty 匹配沒有子元素的元素。如果元素中含有文本節(jié)點(diǎn)、HTML 元素或者一個空格，則:empty 不能匹配這個元素。

如下例，:empty 能匹配的元素會變?yōu)辄S色。

第一個元素中有文本節(jié)點(diǎn)，所以其背景不會變成黃色；

第二個元素中有一個空格，有空格則該元素不為空，所以其背景不會變成黃色；

第三個元素中沒有任何內(nèi)容，所以其背景會變成黃色；

第四個元素中只有一個注釋，此時該元素是空的，所以其背景會變成黃色；

HTML:

這個容器里的背景是橙色的

CSS:

div { background: orange; height: 30px; width: 200px;} div:empty { background: yellow;}

5 :enabled

:enabled 匹配沒有設(shè)置 disabled 屬性的表單元素。

6 :in-range

:in-range 匹配在指定區(qū)域內(nèi)元素。

如下例，當(dāng)數(shù)字選擇器的數(shù)字在 5 到 10 是，數(shù)字選擇器的邊框會設(shè)為綠色。

HTML:

CSS:

input[type=number] { border: 5px solid orange;} input[type=number]:in-range { border: 5px solid green;}

7 :out-of-range

:out-of-range 與:in-range 相反，它匹配不在指定區(qū)域內(nèi)的元素。

8 :indeterminate

indeterminate 的英文意思是“ 不確定的”。當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時，:indeterminate 匹配該組中所有的單選框或復(fù)選框。

如下例，當(dāng)下面的一組單選框沒有一個處于被選中時，與 input 相鄰的 label 元素的背景會被設(shè)為橙色。

HTML:

• Option 1
• Option 2
• Option 3

CSS:

:indeterminate + label { background: orange;}

9 :valid

:valid 匹配條件驗(yàn)證正確的表單元素。

如下例，當(dāng) email 輸入框內(nèi)的值符合 email 格式時，輸入框的邊框會被設(shè)為綠色。

HTML:

CSS:

input[type=email]:valid { border: 1px solid green;}

10 :invalid

:invalid 與:valid 相反，匹配條件驗(yàn)證錯誤的表單元素。

11 :optional

:optional 匹配是具有 optional 屬性的表單元素。當(dāng)表單元素沒有設(shè)置為 required 時，即為 optional 屬性。

如下例，第一個 input 的背景不會被設(shè)為黃色，第二個 input 的背景會被設(shè)為黃色。

HTML:

CSS:

:optional { background: yellow;}

12 :required

:required 與:optional 相反匹配設(shè)置了 required 屬性的表單元素。

13 :read-only

:read-only 匹配設(shè)置了只讀屬性的元素，表單元素可以通過設(shè)置“readonly” 屬性來定義元素只讀。

如下例，input 元素的背景會被設(shè)為黃色。

HTML:

CSS:

input:read-only { background-color: yellow;}

14 :read-write

:read-write 匹配處于編輯狀態(tài)的元素。input，textarea 和設(shè)置了 contenteditable 的 HTML 元素獲取焦點(diǎn)時即處于編輯狀態(tài)。

如下例，input 輸入框和富文本框獲取焦點(diǎn)時，背景變成黃色。

HTML:

點(diǎn)擊這里可以編輯

獲取焦點(diǎn)時背景變黃

CSS:

:read-write:focus { background: yellow;}

15 :scope(處于試驗(yàn)階段)

:scope 匹配處于 style 作用域下的元素。當(dāng) style 沒有設(shè)置 scope 屬性時，style 內(nèi)的樣式會對整個 html 起作用。

如下例，第二個 section 中的元素的文本會變?yōu)樾斌w。

HTML:

很正常的一些文本

很正常的一些文本

這里的文本是斜體的

這里的文本是斜體的

注：目前支持這個偽類的瀏覽器只有火狐。

語言相關(guān)

1 :dir(處于實(shí)驗(yàn)階段)

:dir 匹配指定閱讀方向的元素，當(dāng) HTML 元素中設(shè)置了 dir 屬性時該偽類才能生效。現(xiàn)時支持的閱讀方向有兩種：ltr(從左往右)和 rtl(從右往左)。目前，只有火狐瀏覽器支持:dir 偽類，并在火狐瀏覽器中使用時需要添加前綴 ( -moz-dir() )。

如下例，p 元素中的阿拉伯語(阿拉伯語是從右往左閱讀的)文本會變成橙色。

HTML:

??????? ???? ?? ???? ?????? ?????? ???? ????? ??????? ????? ??? ???????? ?????? ?????? ??? ????? ?????.

CSS:

article :-moz-dir(rtl) { color: orange;} /* unprefixed */article :dir(rtl) { color: orange;}

如下例，p 元素中的英語文本會變成藍(lán)色

HTML:

?If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.

CSS:

article :-moz-dir(ltr) { color: blue;} /* unprefixed */article :dir(ltr) { color: blue;}

2 :lang

:lang 匹配設(shè)置了特定語言的元素，設(shè)置特定語言可以通過為了 HTML 元素設(shè)置 lang=”” 屬性，設(shè)置 meta 元素的 charset=”” 屬性，或者是在 http 頭部上設(shè)置語言屬性。

實(shí)際上，lang=”” 屬性不只可以在 html 標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置。

如下例，分別給不同的語言設(shè)置不同的引用樣式：

HTML:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

CSS:

:lang(en) q { quotes: '“' '”'; }:lang(fr) q { quotes: '?' '?'; }:lang(de) q { quotes: '?' '?'; }

其他

1 :root

:root 匹配文檔的根元素。一般的 html 文件的根元素是 html 元素，而 SVG 或 XML 文件的根元素則可能是其他元素。

如下例，將 html 元素的背景設(shè)置為橙色

:root { background: orange;}

2.:fullscreen

:fullscreen 匹配處于全屏模式下的元素。全屏模式不是通過按 F11 來打開的全屏模式，而是通過 Javascript 的 Fullscreen API 來打開的，不同的瀏覽器有不同的 Fullscreen API。目前，:fullscreen 需要添加前綴才能使用。

如下例，當(dāng)處于全屏模式時，h1 元素的背景會變成橙色

HTML:

在全屏模式下，這里的文本的背景會變成橙色.

進(jìn)入全屏模式!

JAVASCRIPT:

var docelem = document.getElementById('element');var button = document.querySelector('button');button.onclick = function() { if (docelem.requestFullscreen) { docelem.requestFullscreen(); }else if (docelem.webkitRequestFullscreen) { docelem.webkitRequestFullscreen(); } else if(docelem.mozRequestFullScreen) { docelem.mozRequestFullScreen(); } else if(docelem.msRequestFullscreen) { docelem.msRequestFullscreen(); }}

CSS:

h1:fullscreen { background: orange;} h1:-webkit-full-screen { background: orange;} h1:-moz-full-screen { background: orange;} h1:-ms-fullscreen { background: orange;}

偽元素

1 ::before/:before

:before 在被選元素前插入內(nèi)容。需要使用 content 屬性來指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹中。

HTML:

World

CSS:

h1:before { content: "Hello ";}

2 ::after/:after

:after 在被元素后插入內(nèi)容，其用法和特性與:before 相似。

3 ::first-letter/:first-letter

:first-letter 匹配元素中文本的首字母。被修飾的首字母不在文檔樹中。

CSS:

h1:first-letter { font-size: 5em;}

4 ::first-line/:first-line

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

CSS:

p:first-line { background: orange;}

5 ::selection

::selection 匹配用戶被用戶選中或者處于高亮狀態(tài)的部分。在火狐瀏覽器使用時需要添加-moz 前綴。該偽元素只支持雙冒號的形式。

CSS:

::-moz-selection { color: orange; background: #333;} ::selection { color: orange; background: #333;}

6 ::placeholder

::placeholder 匹配占位符的文本，只有元素設(shè)置了 placeholder 屬性時，該偽元素才能生效。

該偽元素不是 CSS 的標(biāo)準(zhǔn)，它的實(shí)現(xiàn)可能在將來會有所改變，所以要決定使用時必須謹(jǐn)慎。

在一些瀏覽器中(IE10 和 Firefox18 及其以下版本)會使用單冒號的形式。

HTML:

CSS:

input::-moz-placeholder { color:#666;} input::-webkit-input-placeholder { color:#666;} /* IE 10 only */input:-ms-input-placeholder { color:#666;} /* Firefox 18 and below */input:-moz-input-placeholder { color:#666;}

7 ::backdrop(處于試驗(yàn)階段)

::backdrop 用于改變?nèi)聊Ｊ较碌谋尘邦伾?#xff0c;全屏模式的默認(rèn)顏色為黑色。該偽元素只支持雙冒號的形式

HTML:

This heading will have a solid background color in full-screen mode.

Trigger full screen!

CSS:

h1:fullscreen::backdrop { background: orange;}

轉(zhuǎn)載自：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

總結(jié)

以上是生活随笔為你收集整理的java的string访问某个元素_CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。