本文轉載自：眾成翻譯
譯者：為之漫筆
鏈接：http://www.zcfy.cc/article/239
原文：https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#?

剛開始從事Web設計時脑溢，我犯了很多錯誤曙旭，也因此獲得了進步谓着。那時候沒有Smashing Magazine蝶防、Can I Use该面、_ CodePen_呜叫，也沒有其他我們現(xiàn)在常見的工具。只要有人能告訴一個設計思路，特別是CSS前沿方向的，那就謝天謝地了咱筛。

今天我的經驗已經很豐富了彼妻，所以想本著友好嫌佑、隨意、探討的原則侨歉，跟大分享一下CSS中的偽類和偽元素屋摇。

如果你已經是有經驗的Web設計者和開發(fā)者了，那么一定對本文要討論的偽類和偽元素有所了解幽邓。不過炮温，還是建議你先看看本文后面完整的列表，看有沒有一兩個你還不知道的牵舵？

在真正開始之前柒啤，因為我們想講偽類和偽元素嘛，所以先問個基本的問題：你知道這里的“偽”是什么意思嗎畸颅？不確定的話担巩，可以參考Dictionary.com的定義：

形容詞

1. 不是真實的但有其外觀；偽裝的没炒；假的或欺騙的涛癌；騙人的。

2. 差不多，很接近拳话，或盡可能一樣先匪。

不用管W3C是怎么定義的，反正偽類就是某個元素的一種虛擬狀態(tài)弃衍，或者說一種特有的性質呀非，這種狀態(tài)或性可以通過CSS捕捉到。常見的偽類有：:link镜盯、:visited姜钳、:hover、:active形耗、:first-child和:nth-child哥桥。當然這只是一少部分，一會兒我們都會介紹激涤。

偽類是一個冒號（:）后跟偽類的名字構成的拟糕，有時候名字后面還會有一個放在括號里的值。:nth-child是第幾個倦踢？

好了送滞，再說偽元素。偽元素是一種虛擬的元素辱挥，CSS把它當成普通HTML元素看待犁嗅。之所以叫偽元素，就因為它們在文檔樹或DOM中并不實際存在晤碘。換句話說褂微，我們不會在HTML中包含偽元素，只會通過CSS來創(chuàng)建偽元素园爷。

以下是幾個常見的偽元素：:after宠蚂、:before和:first-letter。偽元素會在本文后面介紹童社。

偽元素是一個冒號還是兩個冒號求厕？

簡單回答：多數(shù)情況下，都行扰楼。

兩個冒號（::）是CSS3為了區(qū)分::before呀癣、::after這樣的偽元素和:hover、:active等偽類才引入的弦赖。除了IE8及以下版本项栏，所有瀏覽器都支持兩個冒號的偽元素表示法。

不過腾节，有些偽元素只能使用兩個冒號忘嫉，像::backdrop。

我個人使用一個冒號案腺，為了跟以前的瀏覽器兼容庆冕。當然，不用兩個冒號不行的時候劈榨，還是要用兩個冒號访递。

這里沒有對錯，完全看你個人喜好同辣。

不過拷姿，我在寫這篇文章時查了一下，規(guī)范建議使用單冒號表示法旱函，原因也是向后兼容：

請注意CSS3中表示偽元素使用雙冒號响巢，比如a::after { … }，這是為了與偽類區(qū)分開棒妨。偽類應該是在CSS中經常出現(xiàn)的踪古。不過，CSS3也允許單冒號的偽元素券腔，目的是向后兼容伏穆。我們也建議暫時使用單冒號。

如果偽元素同時支持單纷纫、雙冒號的形式枕扫，本文標題會給出兩種形式。如果只支持雙冒號辱魁，那就只有一種形式烟瞧。

什么時候使用（不使用）生成的內容

通過CSS生成內容需要用到CSS屬性content和偽元素:before或:after。

其中的“內容”（content）可是純文本染簇，也可以是一個容器燕刻，通過CSS操作來顯示某種圖形或者裝飾性元素。本文只介紹第一種內容剖笙，即文本卵洗。

重要的內容可不要使用生成的內容，原因如下：

• 屏幕閱讀器讀不到它
• 無法選中
• 如果為了裝飾而在生成內容中使用了多余的內容弥咪，那么支持CSS生成內容的屏幕閱讀器會大聲地把它讀出來过蹂，導致用戶體驗更差

CSS生成的內容只適用于裝飾性、不重要的內容聚至，但也要確保屏幕閱讀器能夠適當處理它酷勺，讓使用這些輔助技術的用戶不至于分心。這里適用“漸進增強”原則扳躬。

在Smashing Magazine上脆诉，Gabriele Romanato為此寫過一篇非常棒的文章甚亭。

實驗性偽類和偽元素

實驗性的偽類和偽元素，指的是那些不穩(wěn)定或沒最終定案的偽類和偽元素击胜。它們的語法和行為還可能有變亏狰。

不過，加上廠商前綴就可以使用這些實驗性的偽類和偽元素偶摔∠就伲可以參考Can I Use，以及一些自動加前綴的工具辰斋，比如-prefix-free或Autoprefixer就是必備的策州。

本文會在實驗性的偽類和偽元素的名字旁邊加上“experimental”標簽。

全部偽類和偽元素（按字母順序）

• :active
• ::after/:after
• ::backdrop (experimental)
• ::before/:before
• :checked
• :default
• :dir (experimental)
• :disabled
• :empty
• :enabled
• :first-child
• ::first-letter/:first-letter
• ::first-line/:first-line
• :first-of-type
• :focus
• :fullscreen (experimental)
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• ::placeholder (experimental)
• :read-only
• :read-write
• :required
• :root
• ::selection
• :scope (experimental)
• :target
• :valid
• :visited
• Bonus content: A Sass mixin for links

好啦宫仗，諸位够挂，好戲開場了！

偽類

首先藕夫，我們討論偽類下硕，從狀態(tài)偽類開始。

狀態(tài)偽類

狀態(tài)偽類通常出現(xiàn)在用戶執(zhí)行某個操作的情況下汁胆。在CSS里梭姓，“操作”也可以是“無操作”，比如尚未點過的鏈接嫩码。

下面就有請它們一個一個地上場誉尖。

:LINK

:link偽類表示鏈接的正常狀態(tài)，選擇那些尚未被點過的鏈接铸题。建議在其他鏈接相關的偽類之前聲明:link铡恕，它們的順序為：:link、:visited丢间、:hover探熔、:active。

a:link {
    color: orange;
}

當然烘挫，這個偽類也可以省略：

a {
    color: orange;
}

:VISITED

:visited偽類選擇點過的鏈接诀艰，應該聲明在第二位（在:link之后）。

a:visited {
    color: blue;
}

:HOVER

:hover偽類在用戶指針懸停時生效饮六。而且它不只可以用于鏈接其垄。

它應該在第三位（在:visited之后）。

a:hover {
    color: orange;
}

看示例：http://codepen.io/ricardozea/pen/vGEzJK

:ACTIVE

:active偽類選擇被鼠標指針或觸摸操作“激活的” 元素卤橄，也可以通過鍵盤來激活绿满，就像:focus偽類一樣。

與:focus類似窟扑，但區(qū)別在于:active只發(fā)生在鼠標被按下到被釋放的這段時間里喇颁。

它應該在第四位（在hover后面）漏健。

a:active {
    color: rebeccapurple;
}

:FOCUS

:focus用于選擇已經通過指針設備、觸摸或鍵盤獲得焦點的元素橘霎，在表單里使用得非常多蔫浆。

a:focus {
    color: green;
}

或者：

input:focus {
    background: #eee;
}

擴展內容：Sass中針對鏈接的混入

如果你用過CSS預處理器，那應該對這一部分感興趣茎毁。

（如果你不熟悉CSS預處理器克懊，沒問題忱辅，跳過這一節(jié)七蜘，直接看下一節(jié)吧。）

為了簡化CSS編碼工作墙懂，這里介紹一下創(chuàng)建一組基本的鏈接樣式的Sass混入（mixin）橡卤。

這里的混入沒有默認參數(shù)，因此我們必須以一種友好的方式损搬，聲明鏈接的全部4種狀態(tài)碧库。

:focus和:active偽類的聲明通常在一塊，當然也可以給它們分開巧勤。

注意這個混入不僅僅適用于鏈接嵌灰，而是適用于任何 HTML元素。

這就是我們定義的混入：

@mixin links ($link, $visited, $hover, $active) {
    & {
        color: $link;
        &:visited {
            color: $visited;
        }
        &:hover {
            color: $hover;
        }
        &:active, &:focus {
            color: $active;
        }
    }
}

使用方法：

a {
    @include links(orange, blue, yellow, teal);
}

編譯結果：

a {
  color: orange;
}
a:visited {
  color: blue;
}
a:hover {
  color: yellow;
}
a:active, a:focus {
  color: teal;
}

看示例：http://codepen.io/ricardozea/pen/wMyZQe

結構化偽類

結構化偽類選擇通過其他選擇符無法選擇的文檔樹或DOM中的其他信息颅悉。

:FIRST-CHILD

:first-child偽類選擇父元素的第一個子元素沽瞭。

在下面的例子中，只有第一個li元素的文本是橙色的剩瓶。

HTML:

<ul>
    <li>This text will be orange.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

li:first-child {
    color: orange;
}

:FIRST-OF-TYPE

:first-of-type偽類選擇父元素容器內任意類型子元素的第一個元素驹溃。

在下面的例子中，第一個li元素和第一個span元素的文本才是橙色的延曙。

HTML:

<ul>
    <li>This text will be orange.</li>
    <li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

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

:LAST-CHILD

:last-child偽類選擇父元素的最后一個子元素豌鹤。

在下面的例子中，只有最后一個li元素的文本是橙色的枝缔。

HTML:

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>This text will be orange.</li>
</ul>

CSS:

li:last-child {
    color: orange;
}

:LAST-OF-TYPE

:last-of-type偽類選擇父元素容器內任意類型子元素的最后一個元素布疙。

在下面的例子中，最后一個li元素和最后一個span元素的文本才是橙色的愿卸。

HTML:

<ul>
    <li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span> <span>This text will be orange.</span></li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>This text will be orange.</li>
</ul>

CSS:

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

:NOT

:not偽類也叫取反偽類拐辽，它通過括號接受一個參數(shù)，一個“選擇符”擦酌。實際上俱诸，這個參數(shù)也可以是另一個偽類。

這個偽類可以連綴使用赊舶，但不能包含別的:not選擇符睁搭。

在下面的例子中赶诊，:not偽類選擇與參數(shù)不匹配的元素。

HTML:

<ul>
    <li class="first-item">Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

應用下面的CSS园骆，除了類為.first-item的li之外的li元素的文本都是橙色的：

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

下面看一看“連綴”兩個:not偽類舔痪。應用下面的CSS規(guī)則，除了類為.first-item的li和最后一個li锌唾，其他li都會有黃色背景和黑色文本：

li:not(.first-item):not(:last-of-type) {
    background: yellow;
    color: black;
}

看示例：http://codepen.io/ricardozea/pen/dGmqbg

:NTH-CHILD

:nth-child偽類根據(jù)元素在標記中的次序選擇相應的元素锄码。

這個偽類在CSS中是用途最廣、支持也最廣的晌涕。

所有:nth偽類都接受一個參數(shù)滋捶，這個參數(shù)是一個公式。公式可以是一個整數(shù)余黎，或者關鍵字odd重窟、even，或者形如an+b的結構惧财。

對于an+b:

• a是一個數(shù)值（整數(shù)）
• n就是n
• +是運算符巡扇，可以是加號+或減號-
• b也是一個整數(shù)，但只有使用了運算符的時候才會用到

以希臘字母的英文列表為例垮衷，以下是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:

選擇第2個子元素厅翔，結果Beta會變成橙色:

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

從第2個子元素起，隔一個選一個搀突，結果Beta刀闷、Delta、Zeta描姚、Theta和Kappa會變成橙色:

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

選擇所有偶數(shù)個子元素：

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

從第6個子元素起涩赢，隔一個選一個，結果Zeta轩勘、Theta和Kappa會變成橙色：

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

看示例：http://codepen.io/ricardozea/pen/adYaER

:NTH-LAST-CHILD

除了是從后往前選擇元素筒扒，:nth-last-child跟:nth-child完全一樣。

CSS:

選擇倒數(shù)第2個子元素绊寻，只有Iota是橙色：

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

從倒數(shù)第2個子元素開始花墩，隔一個選一個，結果Iota澄步、Eta冰蘑、Epsilon、Gamma和Alpha會變成橙色：

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

從后往前村缸，選擇所有偶數(shù)個子元素：

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

從倒數(shù)第6個元素開始祠肥，隔一個選一個，因此Epsilon梯皿、Gamma和Alpha會變成橙色：

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

:NTH-OF-TYPE

:nth-of-type偽類與:nth-child類似仇箱，主要區(qū)別是它更具體了县恕，只針對特定類型的元素。

在下面的例子中剂桥，所有容器內的第2個p元素將為橙色忠烛。

HTML:

<article>
    <h1>Heading Goes Here</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""></a>
    <p>This text will be orange.</p>
</article>

CSS:

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

:NTH-LAST-OF-TYPE

:nth-last-of-type偽類是從后往前數(shù)，其余跟:nth-of-type一樣权逗。

對于下面的例子美尸，因為是從末尾開始，所以第1個段落會變成橙色斟薇。

HTML:

<article>
    <h1>Heading Goes Here</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""></a>
    <p>This text will be orange.</p>
</article>

CSS:

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

相關資源

建議大家在使用:nth偽類前师坎，一定要參考下面這兩篇不錯的文章：

• “CSS3 Structural Pseudo-Class Selector Tester” Lea Verou
• “:nth Tester” CSS-Tricks

:ONLY-CHILD

:only-child選擇父元素中唯一的子元素。

在下面的例子中奔垦，第一個ul只有一個子元素屹耐，因此該子元素將變成橙色尸疆。第二個ul有多個子元素椿猎，因此其子元素不會受:only-child偽類影響。

HTML:

<ul>
    <li>This text will be orange.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

ul :only-child {
    color: orange;
}

:ONLY-OF-TYPE

:only-of-type偽類選擇同級中類型唯一的元素寿弱，與:only-child類似犯眠，但針對特定類型的元素，讓選擇符有了更強的意義症革。

在下面的例子中筐咧，第一個ul只有一個li元素，因此其文本將為橙色噪矛。

HTML:

<ul>
    <li>This text will be orange.</li>
</ul>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS:

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

:TARGET

:target偽類通過元素的ID及URL中的錨名稱選擇元素量蕊。

在下面的例子中，當瀏覽器中的URL以#target結尾時艇挨，ID為target的文章將被選中残炮。

URL:

http://awesomebook.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;
}

提示： background:是background-color:的簡寫形式，用于指定顏色時效果一樣缩滨。

驗證偽類

表單驗證一直是Web設計與開始中最不好搞的势就。有了驗證偽類，可以讓用戶填寫表單的過程更平順脉漏。

有一點要注意苞冯，雖然本節(jié)介紹的偽類都用于表單元素，但其中有的偽類也可以用于其他HTML元素侧巨。

下面就來看看這些偽類吧舅锄！

:CHECKED

:checked偽類選擇被勾選或選中的單選按鈕、多選按鈕及列表選項司忱。

在下面的例子中皇忿，復選框被勾選后碉怔，標簽會突出顯示，增加了用戶體驗禁添。

看示例：http://codepen.io/ricardozea/pen/wMYExY

:DEFAULT

:default偽類從表單中一組類似元素里選擇默認的元素（即“提交”按鈕撮胧。——譯者注）老翘。

如果要選擇表單中沒有類的默認按鈕芹啥，可以使用:default。

注意铺峭，在表單中使用Reset或Clear按鈕會招致嚴重的可用性問題墓怀，所以除非絕對必要再用。參考下面兩篇文章：

• “Reset and Cancel Buttons,” Nielsen Norman Group (2000)
• “Killing the Cancel Button on Forms for Good,” UX Movement (2010)

看示例：http://codepen.io/ricardozea/pen/WrzJKO

:DISABLED

:disabled偽類選擇禁用狀態(tài)的表單元素卫键。處于禁用狀態(tài)的元素傀履，不能被選中、勾選莉炉，不能獲得焦點钓账。

在下面的例子中，name輸入框處于禁用狀態(tài)絮宁，因此會半透明梆暮。

HTML:

<input type="text" id="name" disabled>

CSS:

:disabled {
    opacity: .5;
}

提示： 標記中是非要使用disabled="disabled"，只寫一個disabled屬性就行了绍昂。在XHTML中啦粹，disabled="disabled"這種寫法才是必須的。

看示例：http://codepen.io/ricardozea/pen/NxOLZm

:EMPTY

:empty偽類選擇其中不包含任何內容的空元素窘游。只要包含一個字母唠椭、其他HTML元素，甚至一個空格忍饰，都不算空贪嫂。

關于空或非空，以下是定義：

• 空
  元素中沒有內容或字符喘批。元素中包含HTML注釋不算有內容撩荣。
• 非空
  出現(xiàn)在元素中的字符∪纳睿空格也算餐曹。

在下面的例子中，

• 第一個元素中包含文本敌厘，因此背景不會變成橙色
• 第二個元素包含一個空格台猴，空格也是內容，因此也不會有橙色背景
• 第三個元素中什么也沒有（空的），因此背景為橙色
• 最后一個元素中只有一個HTML注釋（也是空的）饱狂，因此也有橙色背景曹步。

HTML:

<div>This box is orange</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;
}

看示例：http://codepen.io/ricardozea/pen/rxqqaM

:ENABLED

:enabled偽類選擇啟用的元素。所有表單元素默認都是啟用的休讳，除非在標記中添加了disabled屬性讲婚。

通過:enabled和:disabled可以提供視覺上的反饋，改善用戶體驗俊柔。

在下面的例子中筹麸，禁用后又被啟用的name輸入框的不透明度將變?yōu)?code>1，同時會有一個1像素的邊框：

:enabled {
    opacity: 1;
    border: 1px solid green;
}

提示： 標記中是非要使用enabled="enabled"雏婶，只寫一個enabled屬性就行了物赶。在XHTML中，enabled="enabled"這種寫法才是必須的留晚。

看示例：http://codepen.io/ricardozea/pen/zqYQxq

:IN-RANGE

:in-range偽類選擇有范圍且值在指定范圍內的元素酵紫。

在下面的例子中，輸入元素支持輸入5~10错维。輸入值在這個范圍內奖地，會觸發(fā)綠色邊框。

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;
}

看示例：http://codepen.io/ricardozea/pen/XXOKwq

:OUT-OF-RANGE

:out-of-range偽類選擇有范圍且值超出指定范圍的元素需五。

在下面的例子中鹉动，輸入元素支持輸入1~12轧坎。輸入值超出這個范圍內宏邮，會觸發(fā)橙色邊框。

HTML:

<input id="months" name="months" type="number" min="1" max="12">`

CSS:

input[type=number]:out-of-range {
    border: 1px solid orange;
}

看示例：http://codepen.io/ricardozea/pen/XXOKwq

:INDETERMINATE

:indeterminate偽類選擇單選按鈕或復選框在頁面加載時沒有被勾選的缸血。

比如蜜氨，頁面加載后，一組單選按鈕中沒有默認或預先勾選的捎泻，或者一個復選框已經通過JavaScript設置為indeterminate狀態(tài)飒炎。

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;
}

看示例：http://codepen.io/ricardozea/pen/adXpQK

:VALID

:valid偽類選擇輸入格式符合要求的表單元素。

在下面的例子中笆豁，email輸入框中的電子郵箱格式是正確的郎汪，因此這個輸入框會被認為有效，將出現(xiàn)1像素的綠色邊框：

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

看示例：http://codepen.io/ricardozea/pen/bEzqVg

:INVALID

:invalid偽類選擇輸入格式不符合要求的表單元素闯狱。

在下面的例子中煞赢，email輸入框中的電子郵箱格式不正確，因此這個輸入框會被認為無效哄孤，將出現(xiàn)橙色邊框：

input[type=email]:invalid {
    background: orange;
}

看示例：http://codepen.io/ricardozea/pen/bEzqVg

:OPTIONAL

:optional偽類選擇表單中非必填的輸入字段照筑。換句話說，只要輸入字段中沒有required屬性，就會被:optional偽類選中遍尺。

在下面的例子中俐载，這個數(shù)值字段是可以選填的褒傅，因此其中的文本將為灰色。

HTML:

<input type="number">

CSS:

:optional {
    color: gray;
}

:READ-ONLY

:read-only偽類選擇用戶不能編輯的元素懦铺，與:disabled偽類相似，標記中使用的屬性決定了使用哪個偽類支鸡。

不能編輯的元素可以用來顯示預先填好阀趴、不允許修改，但又需要連同表單一起提交的信息苍匆。

在下面的例子中刘急，文本框有一個readonly屬性，因此會被:read-only偽類選中浸踩，文本將為灰色叔汁。

HTML:

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

CSS:

input:read-only {
    color: gray;
}

看示例：http://codepen.io/ricardozea/pen/Nxopbj

:READ-WRITE

:read-write偽類選擇用戶可以編輯的元素，適用于有contenteditable屬性的HTML元素检碗。

有時候据块，可以與:focus偽類一塊使用以增強用戶體驗。

在下面的例子中折剃，點擊div元素就可以編輯其中的內容另假，為此可以應用特殊的樣式，讓用戶知道自己可以編輯其中的內容怕犁。

HTML:

<div class="editable" contenteditable>
    <h1>Click on this text to edit it</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
</div>

CSS:

:read-write:focus {
    padding: 5px;
    border: 1px dotted black;
}

看示例：http://codepen.io/ricardozea/pen/LGqWxK

:REQUIRED

:required偽類選擇有required屬性的表單元素边篮。

除了通過標簽中的星號（*）提示必填，也可以通過這個偽類為輸入字段應用樣式奏甫。這樣就萬無一失了戈轿。

在下面的例子中，輸入框有required屬性阵子，通過這個偽類為它應用特殊樣式思杯，可以提醒用戶它是必填項。

HTML:

<input type="email" required>

CSS:

:required {
    color: black;
    font-weight: bold;
}

看示例：http://codepen.io/ricardozea/pen/KVJWmZ

:SCOPE (EXPERIMENTAL)

:scope偽類適用于style標簽中有scoped屬性的情形挠进。

如果頁面中某一部分的style標簽里沒有scoped屬性色乾，那么:scope偽類會一直向上查找，直到html元素领突，即當前樣式表的默認作用范圍暖璧。

在下面的例子中，第二個section中有一個scoped樣式表攘须，因此這個section中的文本會變成斜體漆撞。

HTML and CSS:

<article>
    <section>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section>
        **<style scoped>
                        :scope {
                            font-style: italic;
                        }
                  </style>**
        <h1>This text will be italicized</h1>
        <p>This text will be italicized.</p>
    </section>
</article>

看示例：http://codepen.io/ricardozea/pen/ZQobzz

語言偽類

語言偽類與頁面中包含的文本相關殴泰，與圖片、視頻等媒體無關浮驳。

:DIR (EXPERIMENTAL)

:dir偽類選擇文檔中指定了語言方向的元素悍汛。換句話說，為了使用:dir偽類至会，需要在標記中為相關元素指定dir屬性离咐。

語言方向目前有兩種：ltr（從左到右）和rtl（從右往左）。

寫這篇文章時奉件，支持:dir偽類的只有Firefox（-moz-dir()）宵蛀，下面的例子同時使用帶前綴和不帶前綴的:dir選擇符。

注意： 要用帶前綴和不帶前綴的選擇符分別創(chuàng)建規(guī)則县貌，兩種選擇符共享一條規(guī)則是不行的术陶。

在下面的例子中，段落中的文字是阿拉伯文（是從右往左書寫的）煤痕，因此其顏色是橙色梧宫。

HTML:

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

CSS:

/* 帶前綴 */
article :-moz-dir(rtl) {
    color: orange;
}

/* 不帶前綴 */
article :dir(rtl) {
    color: orange;
}

下面段落中的文字是英文（從左到右），顏色為藍色摆碉。

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;
}

/* 不帶前綴 */
article :dir(ltr) {
    color: blue;
}

看示例：http://codepen.io/ricardozea/pen/adrxJy

:LANG

:lang偽類選擇的元素通過lang=""屬性塘匣、相應的meta元素以及HTTP首部的協(xié)議信息來確定。

lang=""屬性常用于html標簽巷帝，其實也可以用于其他標簽忌卤。

插一句，這里通常的做法是使用CSS的quotes 屬性來標記特定的語言楞泼。不過驰徊，多數(shù)瀏覽器（包括IE9及更高版本）會在CSS中沒有聲明的情況下自動添加適當?shù)囊脴擞洝?/p>

不過，自動添加的引用標記也可能不合適现拒。因為瀏覽器自動添加的與CSS添加的還不太一樣辣垒。

比如瀏覽器為德語（de）添加的引用標記如下：

?Lorem ipsum dolor sit amet.“

但通過CSS為德語添加的引用標簽則通常如下：

?Lorem ipsum dolor sit amet.?

這兩種都對。因此印蔬，使用瀏覽器自動添加的引用標記，還是自己通過CSS的:lang偽類及quotes屬性添加脱衙，都看你的需要侥猬。

下面看看怎么通過CSS來添加引用標記。

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: '?' '?'; }

看示例：http://codepen.io/ricardozea/pen/gPJyvJ

其他偽類

下面再看看擁有其他功能的偽類捐韩。

:ROOT

:root偽類選擇文檔中最高層次的父元素退唠。

在HTML中，:root偽類選擇的就是html元素荤胁。但在SVG或XML等標記語言中瞧预，它可能選擇不同的元素。

以下規(guī)則為HTML文檔中最高層次的父元素html添加背景顏色：

:root {
    background: orange;
}

注意： 使用html也可以設置相同的樣式，但:root是一個類垢油，擁有比元素選擇符（即html）更高的特指度盆驹。

:FULLSCREEN (EXPERIMENTAL)

:fullscreen偽類選擇在全屏模式下顯示的元素。

不過滩愁，這不適用于用戶按F11進入的全屏模式躯喇，只適用于通過JavaScript Fullscreen API切換進入的全屏模式，通常由父容器中的圖片硝枉、視頻或游戲來調用廉丽。

怎么知道已經進入全屏模式呢？一般瀏覽器會在窗口頂部提示你妻味，并告訴你按Escape鍵可以退出全屏模式正压。

使用:fullscreen偽類前必須知道，瀏覽器應用樣式的方式差別很大责球。而且蔑匣，不僅要在CSS中使用前綴，JavaScript中也一樣棕诵。推薦使用Hernan Rajchert的screenfull.js裁良，它幫我們填了不少瀏覽器的“坑”。

本文不會討論全屏API校套，只給出一個在WebKit和Blink瀏覽器中可用的例子价脾。

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 {
    background: orange;
}

看示例：http://codepen.io/ricardozea/pen/ZQNZqy

偽元素

如前所述，偽元素類似一種虛擬元素笛匙，可以將其視為普通的HTML元素侨把。但偽元素并不存在于文檔樹或DOM中，因此不能在HTML中輸入妹孙，只能通過CSS創(chuàng)建秋柄。

同樣，雙冒號(::)與單冒號(:)也只是CSS3與CSS2.1的不同蠢正。

::BEFORE/:BEFORE

:before偽元素與:after類似骇笔，都可以為其他HTML元素添加內容（文本或圖形）。同樣嚣崭，這里的內容并不實際存在于DOM中笨触，但可以像存在一樣操作它們。需要在CSS中聲明content屬性雹舀。

記住芦劣，通過這個偽元素生成的內容不能通過其他選擇符選中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:before {
    content: "Hello "; /* 注意Hello后面有一個空格 */
}

結果網(wǎng)頁中會變成這樣：

Hello Ricardo!

注意： 看到“Hello ”后面的空格了嗎说榆？沒錯虚吟，空格也算數(shù)寸认。

::AFTER/:AFTER

:after偽元素也用于為其他HTML元素添加內容（文本或圖形）。這里的內容并不實際存在于DOM中串慰，但可以像存在一樣操作它們偏塞。為了使用這個偽元素，必須在CSS中聲明content屬性模庐。

同樣烛愧，通過這個偽元素添加的任何內容都無法通過其他選擇符選中。

HTML:

<h1>Ricardo</h1>

CSS:

h1:after {
    content: ", Web Designer!";
}

結果如下：

Ricardo, Web Designer!

::BACKDROP (EXPERIMENTAL)

::backdrop偽元素是在全屏元素后面生成的一個盒子掂碱，與:fullscreen偽類連用怜姿，修改全屏后元素的背景顏色。

注意： ::backdrop偽元素必須用雙冒號疼燥。

還看前面:fullscreen偽類的例子沧卢。

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://codepen.io/ricardozea/pen/bEPEPE

::FIRST-LETTER/:FIRST-LETTER

:first-letter偽元素選擇一行文本第一個字符。

如果相應行前面包含圖片醉者、視頻或表格元素但狭，那么不會影響選擇第一個字符。

這個偽元素非常適合對段落進行排版撬即，有了它就不必用圖片或其他技巧了立磁。

提示： 這個偽元素也可以選中:before偽元素生成的第一個字符。

CSS:

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

::FIRST-LINE/:FIRST-LINE

:first-line選擇元素的第一行剥槐，只適用于塊級元素唱歧，行內元素不適用。

即使一段文本有多行粒竖，也會選中第一行颅崩。

CSS:

p:first-line {
    background: orange;
}

::SELECTION

::selection選擇文檔中被高亮選中的部分。

注意蕊苗，基于Gecko的瀏覽器要求使用前面：::-moz-selection沿后。

注意： 在一條規(guī)則中同時使用帶前綴和不還前綴的::selection是不行的，要分別寫朽砰。

CSS:

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

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

::PLACEHOLDER (EXPERIMENTAL)

::placeholder偽元素選擇表單元素中通過placeholder屬性設置的占位文本尖滚。

也可以寫成::input-placeholder。

注意： 這個偽元素不是標準的锅移，因此將來有可能會變化熔掺。

在某些瀏覽器（IE10及Firefox 18之前）中，::placeholder偽元素的實現(xiàn)類似一個偽類非剃。其他瀏覽器都將其視為偽元素。因此推沸，除非要兼容IE10或舊版本的Firefox瀏覽器备绽，因此應該這樣寫：

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;
}

小結

CSS偽類和偽元素相當有用券坞，對不？這些偽類和偽元素提供了豐富的選擇便利肺素。

不要光看恨锚，自己動手試一試吧。廣受支持的偽類和偽元素是很靠譜的倍靡。

希望大家看了這篇長文能有所收獲猴伶。別忘了收藏它！