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

偽類與偽元素

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

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

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

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

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

偽類與偽元素的區別

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

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

<ul>
 <li>我是第一個</li>
 <li>我是第二個</li>
</ul>

如果想要給第一項添加樣式，可以在為第一個<li> 添加一個類，并在該類中定義對應樣式：

HTML:

<ul>
 <li class="first-item">我是第一個</li>
 <li>我是第二個</li>
</ul>

CSS:

li.first-item {
 color: orange
}

如果不用添加類的方法，我們可以通過給設置第一個<li> 的:first-child 偽類來為其添加樣式。這個時候，被修飾的<li> 元素依然處于文檔樹中。

CSS:

li:first-child {
 color: orange
}

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

<p>Hello World, and wish you have a good day!</p>

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

HTML:

<p><span class="first">H</span>ello World, and wish you have a good day!</p>

CSS:

.first {
 font-size: 5em;
}

如果不創建一個<span> 元素，我們可以通過設置<p> 的:first-letter 偽元素來為其添加樣式。這個時候，看起來好像是創建了一個虛擬的<span> 元素并添加了樣式，但實際上文檔樹中并不存在這個<span> 元素。

CSS:

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

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

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

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

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

對于偽元素是使用單冒號還是雙冒號的問題，w3c 標準中的描述如下：

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 標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。

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

偽類與偽元素的具體用法

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

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

偽類

狀態

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

1 :link

選擇未訪問的鏈接

2 :visited

選擇已訪問的鏈接

3 :hover

選擇鼠標指針浮動在其上的元素

4 :active

選擇活動的鏈接

5 :focus

選擇獲取焦點的輸入字段

結構化

1 :not

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

如下例，除了第一個<li> 元素外，其他<li> 元素的文本都會變為橙色。

HTML:

<ul>
 <li class="first-item">一些文本</li>
 <li>一些文本</li>
 <li>一些文本</li>
 <li>一些文本</li>
</ul>

CSS:

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

2 :first-child

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

如下例，第一個<li> 元素的文本會變為橙色。

HTML:

<ul>
 <li>這里的文本是橙色的</li>
 <li>一些文本</li>
 <li>一些文本</li>
</ul>

CSS:

li:first-child {
 color: orange;
}

3 : last-child

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

如下例，最后一個<li> 元素的文本會變為橙色。

HTML:

<ul>
 <li>一些文本</li>
 <li>一些文本</li>
 <li>這里的文本是橙色的</li>
</ul>

CSS:

li:last-child {
 color: orange;
}

4 first-of-type

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

如下例，第一個<li> 元素和第一個<span> 元素的文本會變為橙色。

HTML:

<ul>
 <li>這里的文本是橙色的</li>
 <li>一些文本 <span>這里的文本是橙色的</span></li>
 <li>一些文本</li>
</ul>

CSS:

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

5 :last-of-type

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

如下例，最后一個<li> 元素的文本會變為橙色。

HTML:

<ul>
 <li>一些文本<span>一些文本</span> <span>這里的文本是橙色的</span></li>
 <li>一些文本</li>
 <li>這里的文本是橙色的</li>
</ul>

CSS:

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

6 :nth-child

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

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

如下例，有以下 HTML 列表：

<ol>
 <li>Alpha</li>
 <li>Beta</li>
 <li>Gamma</li>
 <li>Delta</li>
 <li>Epsilon</li>
 <li>Zeta</li>
 <li>Eta</li>
 <li>Theta</li>
 <li>Iota</li>
 <li>Kappa</li>
</ol>

CSS:

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

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

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

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

選擇位置序號為偶數的元素：

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

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

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

7 :nth-last-child

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

8 :nth-of-type

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

如下例，第二個<p> 元素會變為橙色。

HTML:

<article>
 <h1>我是標題</h1>
 <p>一些文本</p>
 <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
 <p>這里的文本是橙色的</p>
</article>

CSS:

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

9 :nth-last-type

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

10 :only-child

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

HTML:

<ul>
 <li>這里的文本是橙色的</li>
</ul>
 
<ul>
 <li>一些文本</li>
 <li>一些文本</li>
</ul>

CSS:

ul :only-child {
 color: orange;
}

11 :only-of-type

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

如下例，第一個 ul 元素只有一個 li 類型的元素，該 li 元素的文本會變為橙色。

HTML:

<ul>
 <li>這里的文本是橙色的</li>
 <p>這里不是橙色</p>
</ul>
 
<ul>
 <li>一些文本</li>
 <li>一些文本</li>
</ul>

CSS:

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

12 :target

當 URL 帶有錨名稱，指向文檔內某個具體的元素時，:target 匹配該元素。

如下例，url 中的 target 命中 id 值為 target 的 article 元素，article 元素的背景會變為黃色。

URL:

http://example.com/#target

HTML:

<article id="target">
 <h1><code>:target</code> pseudo-class</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</article>

CSS:

:target {
 background: yellow;
}

表單相關

1 :checked

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

如下例，當復選框被選中時，與其相鄰的<label> 元素的背景會變成黃色。

HTML:

<input type="checkbox"/>
<label>我同意</label>

CSS:

input:checked + label {
 background: yellow;
}

2 :default

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

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

HTML:

<form action="#">
 <button>重置</button>
 <button type="submit">提交</button>
</form>

CSS:

:default {
 background: yellow;
}

3 :disabled

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

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

HTML:

<input type="text" disabled/>

CSS:

:disabled {
 opacity: .5;
}

4 :empty

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

如下例，:empty 能匹配的元素會變為黃色。

第一個元素中有文本節點，所以其背景不會變成黃色；

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

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

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

HTML:

<div>這個容器里的背景是橙色的</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>

CSS:

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

5 :enabled

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

6 :in-range

:in-range 匹配在指定區域內元素。

如下例，當數字選擇器的數字在 5 到 10 是，數字選擇器的邊框會設為綠色。

HTML:

<input type="number" min="5" max="10">

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 相反，它匹配不在指定區域內的元素。

8 :indeterminate

indeterminate 的英文意思是“ 不確定的”。當某組中的單選框或復選框還沒有選取狀態時，:indeterminate 匹配該組中所有的單選框或復選框。

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

HTML:

<ul>
 <li>
 <input type="radio" name="list" id="option1">
 <label for="option1">Option 1</label>
 </li>
 <li>
 <input type="radio" name="list" id="option2">
 <label for="option2">Option 2</label>
 </li>
 <li>
 <input type="radio" name="list" id="option3">
 <label for="option3">Option 3</label>
 </li>
</ul>

CSS:

:indeterminate + label {
 background: orange;
}

9 :valid

:valid 匹配條件驗證正確的表單元素。

如下例，當 email 輸入框內的值符合 email 格式時，輸入框的邊框會被設為綠色。

HTML:

<input type="email"/>

CSS:

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

10 :invalid

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

11 :optional

:optional 匹配是具有 optional 屬性的表單元素。當表單元素沒有設置為 required 時，即為 optional 屬性。

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

HTML:

<input type="text" required />
<input type="text" />

CSS:

:optional {
 background: yellow;
}

12 :required

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

13 :read-only

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

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

HTML:

<input type="text" value="I am read only" readonly>

CSS:

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

14 :read-write

:read-write 匹配處于編輯狀態的元素。input，textarea 和設置了 contenteditable 的 HTML 元素獲取焦點時即處于編輯狀態。

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

HTML:

<input type="text" value="獲取焦點時背景變黃"/>
 
<div class="editable" contenteditable>
 <h1>點擊這里可以編輯</h1>
 <p>獲取焦點時背景變黃</p>
</div>

CSS:

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

15 :scope(處于試驗階段)

:scope 匹配處于 style 作用域下的元素。當 style 沒有設置 scope 屬性時，style 內的樣式會對整個 html 起作用。

如下例，第二個 section 中的元素的文本會變為斜體。

HTML:

<article>
 <section>
 <h1>很正常的一些文本</h1>
 <p>很正常的一些文本</p>
 </section>
 <section>
 <style scoped>
 :scope {
 font-style: italic;
 }
 </style>
 <h1>這里的文本是斜體的</h1>
 <p>這里的文本是斜體的</p>
 </section>
</article>

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

語言相關

1 :dir(處于實驗階段)

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

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

HTML:

<article dir="rtl">
<p>??????? ???? ?? ???? ?????? ?????? ???? ????? ??????? ????? ??? ???????? ?????? ?????? ??? ????? ?????.</p>
</article>

CSS:

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

如下例，p 元素中的英語文本會變成藍色

HTML:

<article dir="ltr">
 <p>?If you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.</p>
</article>

CSS:

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

2 :lang

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

實際上，lang=”” 屬性不只可以在 html 標簽上設置，也可以在其他的元素上設置。

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

HTML:

<article lang="en">
 <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
 <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
 <q>Lorem ipsum dolor sit amet.</q>
</article>

CSS:

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

其他

1 :root

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

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

:root {
 background: orange;
}

2.:fullscreen

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

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

HTML:

<h1 id="element">在全屏模式下，這里的文本的背景會變成橙色.</h1>
<button>進入全屏模式!</button>

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 在被選元素前插入內容。需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。

HTML:

<h1>World</h1>

CSS:

h1:before {
 content: "Hello ";
}

2 ::after/:after

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

3 ::first-letter/:first-letter

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

CSS:

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

4 ::first-line/:first-line

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

CSS:

p:first-line {
 background: orange;
}

5 ::selection

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

CSS:

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

6 ::placeholder

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

該偽元素不是 CSS 的標準，它的實現可能在將來會有所改變，所以要決定使用時必須謹慎。

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

HTML:

<input type="email" placeholder="name@domain.com">

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(處于試驗階段)

::backdrop 用于改變全屏模式下的背景顏色，全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式

HTML:

<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>

CSS:

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

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