熟悉前端的人都會聽過css的偽類與偽元素，然而大多數的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發，區分這兩者的區別，並且列出大部分偽類與偽元素的具體用法，即使你有用過偽類與偽元素，但裡面總有一兩個你沒見過的吧。
1.偽類與偽元素
先說一說為什麼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來在一個元素前增加一些文字，併為這些文字新增樣式。雖然使用者可以看到這些文字，但是這些文字實際上不在文件樹中。
2.偽類與偽元素的區別
這裡通過兩個例子來說明兩者的區別。
下面是一個簡單的html列表片段：
|
1 2 3 4 |
<ul> <li>我是第一個</li> <li>我是第二個</li> </ul> |
如果想要給第一項新增樣式，可以在為第一個<li>新增一個類，並在該類中定義對應樣式：
HTML:
|
1 2 3 4 |
<ul> <li class="first-item">我是第一個</li> <li>我是第二個</li> </ul> |
CSS:
|
1 2 3 |
li.first-item { color: orange } |
如果不用新增類的方法，我們可以通過給設定第一個<li>的:first-child偽類來為其新增樣式。這個時候，被修飾的<li>元素依然處於文件樹中。
HTML:
|
1 2 3 4 |
<ul> <li>我是第一個</li> <li>我是第二個</li> </ul> |
CSS:
|
1 2 3 |
li:first-child { color: orange } |
下面是另一個簡單的html段落片段：
|
1 |
<p>Hello World, and wish you have a good day!</p> |
如果想要給該段落的第一個字母新增樣式，可以在第一個字母中包裹一個<span>元素，並設定該span元素的樣式：
HTML:
|
1 |
<p><span class="first">H</span>ello World, and wish you have a good day!</p> |
CSS:
|
1 2 3 |
.first { font-size: 5em; } |
如果不建立一個<span>元素，我們可以通過設定<p>的:first-letter偽元素來為其新增樣式。這個時候，看起來好像是建立了一個虛擬的<span>元素並新增了樣式，但實際上文件樹中並不存在這個<span>元素。
HTML:
|
1 |
<p>Hello World, and wish you have a good day!</p> |
CSS:
|
1 2 3 |
p:first-letter { font-size: 5em; } |
從上述例子中可以看出，偽類的操作物件是文件樹中已有的元素，而偽元素則建立了一個文件數外的元素。因此，偽類與偽元素的區別在於：有沒有建立一個文件樹之外的元素。
3.偽元素是使用單冒號還是雙冒號？
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標準要求偽元素使用雙冒號的寫法，但也依然支援單冒號的寫法。為了向後相容，我們建議你在目前還是使用單冒號的寫法。
實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。
4.偽類與偽元素的具體用法
這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖：
某些偽類或偽元素仍然處於試驗階段，在使用前建議先在Can I Use等網站查一查其瀏覽器相容性。處於試驗階段的偽類或偽元素會在標題中標註。
偽類
狀態
由於狀態偽類的用法大家都十分熟悉，這裡就不用例子說明了。
1 :link
選擇未訪問的連結
2 :visited
選擇已訪問的連結
3 :hover
選擇滑鼠指標浮動在其上的元素
4 :active
選擇活動的連結
5 :focus
選擇獲取焦點的輸入欄位
結構化
1 :not
一個否定偽類，用於匹配不符合引數選擇器的元素。
如下例，除了第一個<li>元素外，其他<li>元素的文字都會變為橙色。
HTML:
|
1 2 3 4 5 6 |
<ul> <li class="first-item">一些文字</li> <li>一些文字</li> <li>一些文字</li> <li>一些文字</li> </ul> |
CSS:
|
1 2 3 |
li:not(.first-item) { color: orange; } |
2 :first-child
匹配元素的第一個子元素。
如下例，第一個<li>元素的文字會變為橙色。
HTML:
|
1 2 3 4 5 |
<ul> <li>這裡的文字是橙色的</li> <li>一些文字</li> <li>一些文字</li> </ul> |
CSS:
|
1 2 3 |
li:first-child { color: orange; } |
3 : last-child
匹配元素的最後一個子元素。
如下例，最後一個<li>元素的文字會變為橙色。
HTML:
|
1 2 3 4 5 |
<ul> <li>一些文字</li> <li>一些文字</li> <li>這裡的文字是橙色的</li> </ul> |
CSS:
|
1 2 3 |
li:last-child { color: orange; } |
4 first-of-type
匹配屬於其父元素的首個特定型別的子元素的每個元素。
如下例，第一個<li>元素和第一個<span>元素的文字會變為橙色。
HTML:
|
1 2 3 4 5 |
<ul> <li>這裡的文字是橙色的</li> <li>一些文字 <span>這裡的文字是橙色的</span></li> <li>一些文字</li> </ul> |
CSS:
|
1 2 3 |
ul :first-of-type { color: orange; } |
5 :last-of-type
匹配元素的最後一個子元素。
如下例，最後一個<li>元素的文字會變為橙色。
HTML:
|
1 2 3 4 5 |
<ul> <li>一些文字<span>一些文字</span> <span>這裡的文字是橙色的</span></li> <li>一些文字</li> <li>這裡的文字是橙色的</li> </ul> |
CSS:
|
1 2 3 |
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列表：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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”會變成橙色：
|
1 2 3 |
ol :nth-child(2) { color: orange; } |
選擇位置序號是2的倍數的元素，”Beta”, “Delta”, “Zeta”, “kappa”會變成橙色:
|
1 2 3 |
ol :nth-child(2n) { color: orange; } |
選擇位置序號為偶數的元素：
|
1 2 3 |
ol :nth-child(even) { color: orange; } |
選擇從第6個開始，位置序號是2的倍數的元素，”Zeta”, “Theta”, “Kappa”會變成橙色：
|
1 2 3 |
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:
|
1 2 3 4 5 6 |
<article> <h1>我是標題</h1> <p>一些文字</p> <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a> <p>這裡的文字是橙色的</p> </article> |
CSS:
|
1 2 3 |
p:nth-of-type(2) { color: orange; } |
9 :nth-last-type
:nth-last-of-type與nth-of-type相似，不同之處在於它是從最後一個子元素開始計數的。
10 :only-child
當元素是其父元素中唯一一個子元素時，:only-child匹配該元素。
HTML:
|
1 2 3 4 5 6 7 8 |
<ul> <li>這裡的文字是橙色的</li> </ul> <ul> <li>一些文字</li> <li>一些文字</li> </ul> |
CSS:
|
1 2 3 |
ul :only-child { color: orange; } |
11 :only-of-type
當元素是其父元素中唯一一個特定型別的子元素時，:only-child匹配該元素。
如下例，第一個ul元素只有一個li型別的元素，該li元素的文字會變為橙色。
HTML:
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>這裡的文字是橙色的</li> <p>這裡不是橙色</p> </ul> <ul> <li>一些文字</li> <li>一些文字</li> </ul> |
CSS:
|
1 2 3 |
li:only-of-type { color: orange; } |
12 :target
當URL帶有錨名稱，指向文件內某個具體的元素時，:target匹配該元素。
如下例，url中的target命中id值為target的article元素，article元素的背景會變為黃色。
URL:
http://example.com/#target
HTML:
|
1 2 3 4 |
<article id="target"> <h1><code>:target</code> pseudo-class</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p> </article> |
CSS:
|
1 2 3 |
:target { background: yellow; } |
表單相關
1 :checked
:checked匹配被選中的input元素，這個input元素包括radio和checkbox。
如下例，當核取方塊被選中時，與其相鄰的<label>元素的背景會變成黃色。
HTML:
|
1 2 |
<input type="checkbox"/> <label>我同意</label> |
CSS:
|
1 2 3 |
input:checked + label { background: yellow; } |
2 :default
:default匹配預設選中的元素，例如：提交按鈕總是表單的預設按鈕。
如下例，只有提交按鈕的背景變成了黃色。
HTML:
|
1 2 3 4 |
<form action="#"> <button>重置</button> <button type="submit">提交</button> </form> |
CSS:
|
1 2 3 |
:default { background: yellow; } |
3 :disabled
:disabled匹配禁用的表單元素。
如下例，被禁用input輸入框的透明度會變成50%。
HTML:
|
1 |
<input type="text" disabled/> |
CSS:
|
1 2 3 |
:disabled { opacity: .5; } |
4 :empty
:empty匹配沒有子元素的元素。如果元素中含有文字節點、HTML元素或者一個空格，則:empty不能匹配這個元素。
如下例，:empty能匹配的元素會變為黃色。
第一個元素中有文字節點，所以其背景不會變成黃色；
第二個元素中有一個空格，有空格則該元素不為空，所以其背景不會變成黃色；
第三個元素中沒有任何內容，所以其背景會變成黃色；
第四個元素中只有一個註釋，此時該元素是空的，所以其背景會變成黃色；
HTML:
CSS:
|
1 2 3 4 5 6 7 8 9 |
div { background: orange; height: 30px; width: 200px; } div:empty { background: yellow; } |
5 :enabled
:enabled匹配沒有設定disabled屬性的表單元素。
6 :in-range
:in-range匹配在指定區域內元素。
如下例，當數字選擇器的數字在5到10是，數字選擇器的邊框會設為綠色。
HTML:
|
1 |
<input type="number" min="5" max="10"> |
CSS:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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:
|
1 2 3 |
:indeterminate + label { background: orange; } |
9 :valid
:valid匹配條件驗證正確的表單元素。
如下例，當email輸入框內的值符合email格式時，輸入框的邊框會被設為綠色。
HTML:
|
1 |
<input type="email"/> |
CSS:
10 :invalid
:invalid與:valid相反，匹配條件驗證錯誤的表單元素。
11 :optional
:optional匹配是具有optional屬性的表單元素。當表單元素沒有設定為required時，即為optional屬性。
如下例，第一個input的背景不會被設為黃色，第二個input的背景會被設為黃色。
HTML:
|
1 2 |
<input type="text" required /> <input type="text" /> |
CSS:
|
1 2 3 |
:optional { background: yellow; } |
12 :required
:required與:optional相反匹配設定了required屬性的表單元素。
13 :read-only
:read-only匹配設定了只讀屬性的元素，表單元素可以通過設定“readonly”屬性來定義元素只讀。
如下例，input元素的背景會被設為黃色。
HTML:
|
1 |
<input type="text" value="I am read only" readonly> |
CSS:
|
1 2 3 |
input:read-only { background-color: yellow; } |
14 :read-write
:read-write匹配處於編輯狀態的元素。input，textarea和設定了contenteditable的HTML元素獲取焦點時即處於編輯狀態。
如下例，input輸入框和富文字框獲取焦點時，背景變成黃色。
HTML:
|
1 2 3 4 5 6 |
<input type="text" value="獲取焦點時背景變黃"/> <div class="editable" contenteditable> <h1>點選這裡可以編輯</h1> <p>獲取焦點時背景變黃</p> </div> |
CSS:
|
1 2 3 |
:read-write:focus { background: yellow; } |
15 :scope(處於試驗階段)
:scope匹配處於style作用域下的元素。當style沒有設定scope屬性時，style內的樣式會對整個html起作用。
如下例，第二個section中的元素的文字會變為斜體。
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:
|
1 2 3 |
<article dir="rtl"> <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p> </article> |
CSS:
|
1 2 3 4 5 6 7 8 9 |
/* prefixed */ article :-moz-dir(rtl) { color: orange; } /* unprefixed */ article :dir(rtl) { color: orange; } |
如下例，p元素中的英語文字會變成藍色
HTML:
|
1 2 3 |
<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:
|
1 2 3 4 5 6 7 8 |
article :-moz-dir(ltr) { color: blue; } /* unprefixed */ article :dir(ltr) { color: blue; } |
2 :lang
:lang匹配設定了特定語言的元素，設定特定語言可以通過為了HTML元素設定lang=””屬性，設定meta元素的charset=””屬性，或者是在http頭部上設定語言屬性。
實際上，lang=””屬性不只可以在html標籤上設定，也可以在其他的元素上設定。
如下例，分別給不同的語言設定不同的引用樣式：
HTML:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
1 2 3 |
:lang(en) q { quotes: '“' '”'; } :lang(fr) q { quotes: '«' '»'; } :lang(de) q { quotes: '»' '«'; } |
其他
1 :root
:root匹配文件的根元素。一般的html檔案的根元素是html元素，而SVG或XML檔案的根元素則可能是其他元素。
如下例，將html元素的背景設定為橙色
|
1 2 3 |
:root { background: orange; } |
2.:fullscreen
:fullscreen匹配處於全屏模式下的元素。全屏模式不是通過按F11來開啟的全屏模式，而是通過Javascript的Fullscreen API來開啟的，不同的瀏覽器有不同的Fullscreen API。目前，:fullscreen需要新增字首才能使用。
如下例，當處於全屏模式時，h1元素的背景會變成橙色
HTML:
|
1 2 |
<h1 id="element">在全屏模式下，這裡的文字的背景會變成橙色.</h1> <button>進入全屏模式!</button> |
JAVASCRIPT:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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:
|
1 |
<h1>World</h1> |
CSS:
|
1 2 3 |
h1:before { content: "Hello "; } |
2 ::after/:after
:after在被元素後插入內容，其用法和特性與:before相似。
3 ::first-letter/:first-letter
:first-letter匹配元素中文字的首字母。被修飾的首字母不在文件樹中。
CSS:
|
1 2 3 |
h1:first-letter { font-size: 5em; } |
4 ::first-line/:first-line
:first-line匹配元素中第一行的文字。這個偽元素只能用在塊元素中，不能用在內聯元素中。
CSS:
|
1 2 3 |
p:first-line { background: orange; } |
5 ::selection
::selection匹配使用者被使用者選中或者處於高亮狀態的部分。在火狐瀏覽器使用時需要新增-moz字首。該偽元素只支援雙冒號的形式。
CSS:
|
1 2 3 4 5 6 7 8 9 |
::-moz-selection { color: orange; background: #333; } ::selection { color: orange; background: #333; } |
6 ::placeholder
::placeholder匹配佔位符的文字，只有元素設定了placeholder屬性時，該偽元素才能生效。
該偽元素不是CSS的標準，它的實現可能在將來會有所改變，所以要決定使用時必須謹慎。
在一些瀏覽器中（IE10和Firefox18及其以下版本）會使用單冒號的形式。
HTML:
|
1 |
<input type="email" placeholder="name@domain.com"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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:
|
1 2 |
<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:
|
1 2 3 |
h1:fullscreen::backdrop { background: orange; } |