剛開始從事 Web 設(shè)計(jì)時(shí)钉稍，我犯了很多錯(cuò)誤，也因此獲得了進(jìn)步棺耍。那時(shí)候沒有Smashing Magazine贡未、Can I Use、_ CodePen_蒙袍，也沒有其他我們現(xiàn)在常見的工具俊卤。只要有人能告訴一個(gè)設(shè)計(jì)思路，特別是 CSS 前沿方向的左敌，那就謝天謝地了瘾蛋。

今天我的經(jīng)驗(yàn)已經(jīng)很豐富了，所以想本著友好矫限、隨意哺哼、探討的原則，跟大分享一下 CSS 中的偽類和偽元素叼风。

如果你已經(jīng)是有經(jīng)驗(yàn)的 Web 設(shè)計(jì)者和開發(fā)者了取董，那么一定對(duì)本文要討論的偽類和偽元素有所了解。不過(guò)无宿，還是建議你先看看本文后面完整的列表茵汰，看有沒有一兩個(gè)你還不知道的？

在真正開始之前孽鸡，因?yàn)槲覀兿胫v偽類和偽元素嘛蹂午，所以先問個(gè)基本的問題：你知道這里的“偽”是什么意思嗎栏豺？不確定的話，可以參考 Dictionary.com 的定義：

形容詞

1. 不是真實(shí)的但有其外觀豆胸；偽裝的奥洼；假的或欺騙的；騙人的晚胡。

2. 差不多灵奖，很接近，或盡可能一樣估盘。

不用管 W3C 是怎么定義的瓷患，反正偽類就是某個(gè)元素的一種虛擬狀態(tài)，或者說(shuō)一種特有的性質(zhì)遣妥，這種狀態(tài)或性可以通過(guò) CSS 捕捉到擅编。常見的偽類有：:link、:visited燥透、:hover沙咏、:active辨图、:first-child和:nth-child班套。當(dāng)然這只是一少部分，一會(huì)兒我們都會(huì)介紹故河。

偽類是一個(gè)冒號(hào)（:）后跟偽類的名字構(gòu)成的吱韭，有時(shí)候名字后面還會(huì)有一個(gè)放在括號(hào)里的值。:nth-child是第幾個(gè)鱼的？

好了理盆，再說(shuō)偽元素。偽元素是一種虛擬的元素凑阶，CSS 把它當(dāng)成普通 HTML 元素看待猿规。之所以叫偽元素，就因?yàn)樗鼈冊(cè)谖臋n樹或 DOM 中并不實(shí)際存在宙橱。換句話說(shuō)姨俩，我們不會(huì)在 HTML 中包含偽元素，只會(huì)通過(guò) CSS 來(lái)創(chuàng)建偽元素师郑。

以下是幾個(gè)常見的偽元素：:after环葵、:before和:first-letter。偽元素會(huì)在本文后面介紹宝冕。

偽元素是一個(gè)冒號(hào)還是兩個(gè)冒號(hào)张遭？

簡(jiǎn)單回答：多數(shù)情況下，都行地梨。

兩個(gè)冒號(hào)（::）是 CSS3 為了區(qū)分::before菊卷、::after這樣的偽元素和:hover缔恳、:active等偽類才引入的。除了 IE8 及以下版本洁闰，所有瀏覽器都支持兩個(gè)冒號(hào)的偽元素表示法褐耳。

不過(guò)，有些偽元素只能使用兩個(gè)冒號(hào)渴庆，像::backdrop铃芦。

我個(gè)人使用一個(gè)冒號(hào)，為了跟以前的瀏覽器兼容襟雷。當(dāng)然刃滓，不用兩個(gè)冒號(hào)不行的時(shí)候，還是要用兩個(gè)冒號(hào)耸弄。

這里沒有對(duì)錯(cuò)咧虎，完全看你個(gè)人喜好。

不過(guò)计呈，我在寫這篇文章時(shí)查了一下砰诵，規(guī)范建議使用單冒號(hào)表示法，原因也是向后兼容：

請(qǐng)注意 CSS3 中表示偽元素使用雙冒號(hào)捌显，比如a::after { … }茁彭，這是為了與偽類區(qū)分開。偽類應(yīng)該是在 CSS 中經(jīng)常出現(xiàn)的扶歪。不過(guò)理肺，CSS3 也允許單冒號(hào)的偽元素，目的是向后兼容善镰。我們也建議暫時(shí)使用單冒號(hào)妹萨。

如果偽元素同時(shí)支持單、雙冒號(hào)的形式炫欺，本文標(biāo)題會(huì)給出兩種形式乎完。如果只支持雙冒號(hào)，那就只有一種形式品洛。

什么時(shí)候使用（不使用）生成的內(nèi)容

通過(guò) CSS 生成內(nèi)容需要用到 CSS 屬性content和偽元素:before或:after树姨。

其中的“內(nèi)容”（content）可是純文本，也可以是一個(gè)容器毫别，通過(guò) CSS 操作來(lái)顯示某種圖形或者裝飾性元素娃弓。本文只介紹第一種內(nèi)容，即文本岛宦。

重要的內(nèi)容可不要使用生成的內(nèi)容台丛，原因如下：

• 屏幕閱讀器讀不到它

• 無(wú)法選中

• 如果為了裝飾而在生成內(nèi)容中使用了多余的內(nèi)容，那么支持 CSS 生成內(nèi)容的屏幕閱讀器會(huì)大聲地把它讀出來(lái)，導(dǎo)致用戶體驗(yàn)更差

CSS 生成的內(nèi)容只適用于裝飾性挽霉、不重要的內(nèi)容防嗡，但也要確保屏幕閱讀器能夠適當(dāng)處理它，讓使用這些輔助技術(shù)的用戶不至于分心侠坎。這里適用“漸進(jìn)增強(qiáng)”原則蚁趁。

在Smashing Magazine上，Gabriele Romanato 為此寫過(guò)一篇非常棒的文章实胸。

實(shí)驗(yàn)性偽類和偽元素

實(shí)驗(yàn)性的偽類和偽元素他嫡，指的是那些不穩(wěn)定或沒最終定案的偽類和偽元素。它們的語(yǔ)法和行為還可能有變庐完。

不過(guò)钢属，加上廠商前綴就可以使用這些實(shí)驗(yàn)性的偽類和偽元素∶徘可以參考 Can I Use淆党，以及一些自動(dòng)加前綴的工具，比如-prefix-free 或 Autoprefixer 就是必備的讶凉。

本文會(huì)在實(shí)驗(yàn)性的偽類和偽元素的名字旁邊加上“experimental”標(biāo)簽染乌。

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

• :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

好啦，諸位懂讯，好戲開場(chǎng)了荷憋！

偽類

首先，我們討論偽類域醇，從狀態(tài)偽類開始台谊。

狀態(tài)偽類

狀態(tài)偽類通常出現(xiàn)在用戶執(zhí)行某個(gè)操作的情況下。在 CSS 里譬挚，“操作”也可以是“無(wú)操作”，比如尚未點(diǎn)過(guò)的鏈接酪呻。

下面就有請(qǐng)它們一個(gè)一個(gè)地上場(chǎng)减宣。

:LINK

:link偽類表示鏈接的正常狀態(tài)，選擇那些尚未被點(diǎn)過(guò)的鏈接玩荠。建議在其他鏈接相關(guān)的偽類之前聲明:link漆腌，它們的順序?yàn)椋?code>:link、:visited阶冈、:hover闷尿、:active。

a:link {
    color: orange;}

當(dāng)然女坑，這個(gè)偽類也可以省略：

a {
    color: orange;}

:VISITED

:visited偽類選擇點(diǎn)過(guò)的鏈接填具，應(yīng)該聲明在第二位（在:link之后）。

a:visited {
    color: blue;}

:HOVER

:hover偽類在用戶指針懸停時(shí)生效。而且它不只可以用于鏈接劳景。

它應(yīng)該在第三位（在:visited之后）誉简。

a:hover {
    color: orange;}

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

:ACTIVE

:active偽類選擇被鼠標(biāo)指針或觸摸操作“激活的” 元素，也可以通過(guò)鍵盤來(lái)激活盟广，就像:focus偽類一樣闷串。

與:focus類似，但區(qū)別在于:active只發(fā)生在鼠標(biāo)被按下到被釋放的這段時(shí)間里筋量。

它應(yīng)該在第四位（在hover后面）烹吵。

a:active {
    color: rebeccapurple;}

:FOCUS

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



a:focus {
    color: green;}

或者：

input:focus {
    background: #eee;}

擴(kuò)展內(nèi)容：Sass 中針對(duì)鏈接的混入

如果你用過(guò) CSS 預(yù)處理器，那應(yīng)該對(duì)這一部分感興趣玻募。

（如果你不熟悉 CSS 預(yù)處理器只损，沒問題，跳過(guò)這一節(jié)七咧，直接看下一節(jié)吧跃惫。）

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

這里的混入沒有默認(rèn)參數(shù)爆存，因此我們必須以一種友好的方式，聲明鏈接的全部 4 種狀態(tài)蝗砾。

:focus和:active偽類的聲明通常在一塊先较，當(dāng)然也可以給它們分開。

注意這個(gè)混入不僅僅適用于鏈接悼粮，而是適用于任何 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);}

編譯結(jié)果：

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

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

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

結(jié)構(gòu)化偽類選擇通過(guò)其他選擇符無(wú)法選擇的文檔樹或 DOM 中的其他信息。

:FIRST-CHILD

:first-child偽類選擇父元素的第一個(gè)子元素扣猫。

在下面的例子中菜循，只有第一個(gè)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偽類選擇父元素容器內(nèi)任意類型子元素的第一個(gè)元素堡距。

在下面的例子中，第一個(gè)li元素和第一個(gè)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偽類選擇父元素的最后一個(gè)子元素昧穿。

在下面的例子中勺远，只有最后一個(gè)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偽類選擇父元素容器內(nèi)任意類型子元素的最后一個(gè)元素时鸵。

在下面的例子中胶逢，最后一個(gè)li元素和最后一個(gè)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偽類也叫取反偽類，它通過(guò)括號(hào)接受一個(gè)參數(shù)宪塔，一個(gè)“選擇符”磁奖。實(shí)際上，這個(gè)參數(shù)也可以是另一個(gè)偽類某筐。

這個(gè)偽類可以連綴使用比搭，但不能包含別的: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:

應(yīng)用下面的 CSS，除了類為.first-item的li之外的li元素的文本都是橙色的：

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

下面看一看“連綴”兩個(gè):not偽類抄囚。應(yīng)用下面的 CSS 規(guī)則霉赡，除了類為.first-item的li和最后一個(gè)li，其他li都會(huì)有黃色背景和黑色文本：

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

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

:NTH-CHILD

:nth-child偽類根據(jù)元素在標(biāo)記中的次序選擇相應(yīng)的元素幔托。

這個(gè)偽類在 CSS 中是用途最廣穴亏、支持也最廣的。

所有:nth偽類都接受一個(gè)參數(shù)重挑，這個(gè)參數(shù)是一個(gè)公式嗓化。公式可以是一個(gè)整數(shù)，或者關(guān)鍵字odd谬哀、even刺覆，或者形如an+b的結(jié)構(gòu)。

對(duì)于an+b:

• a是一個(gè)數(shù)值（整數(shù)）

• n就是n

• +是運(yùn)算符史煎，可以是加號(hào)+或減號(hào)-

• b也是一個(gè)整數(shù)谦屑，但只有使用了運(yùn)算符的時(shí)候才會(huì)用到

以希臘字母的英文列表為例，以下是 HTML 標(biāo)記結(jié)構(gòu)：

<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 個(gè)子元素篇梭，結(jié)果 Beta 會(huì)變成橙色:

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

從第 2 個(gè)子元素起氢橙，隔一個(gè)選一個(gè)，結(jié)果 Beta很洋、Delta充蓝、Zeta、Theta 和 Kappa 會(huì)變成橙色:

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

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

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

從第 6 個(gè)子元素起喉磁，隔一個(gè)選一個(gè)，結(jié)果 Zeta官脓、Theta 和 Kappa 會(huì)變成橙色：

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

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

:NTH-LAST-CHILD

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

CSS:

選擇倒數(shù)第 2 個(gè)子元素卑笨，只有 Iota 是橙色：

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

從倒數(shù)第 2 個(gè)子元素開始孕暇，隔一個(gè)選一個(gè)，結(jié)果 Iota、Eta妖滔、Epsilon隧哮、Gamma 和 Alpha 會(huì)變成橙色：

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

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

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

從倒數(shù)第 6 個(gè)元素開始座舍，隔一個(gè)選一個(gè)沮翔，因此 Epsilon、Gamma 和 Alpha 會(huì)變成橙色：

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

:NTH-OF-TYPE

:nth-of-type偽類與:nth-child類似曲秉，主要區(qū)別是它更具體了采蚀，只針對(duì)特定類型的元素。

在下面的例子中承二，所有容器內(nèi)的第 2 個(gè)p元素將為橙色榆鼠。

HTML:

<article>
    <h1>Heading Goes Here</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></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一樣亥鸠。

對(duì)于下面的例子妆够，因?yàn)槭菑哪┪查_始，所以第 1 個(gè)段落會(huì)變成橙色负蚊。

HTML:

<article>
    <h1>Heading Goes Here</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
    <p>This text will be orange.</p></article>

CSS:

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

相關(guān)資源

建議大家在使用:nth偽類前神妹，一定要參考下面這兩篇不錯(cuò)的文章：

• “CSS3 Structural Pseudo-Class Selector Tester” Lea Verou

• “:nth Tester” CSS-Tricks

:ONLY-CHILD

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

在下面的例子中盖桥，第一個(gè)ul只有一個(gè)子元素灾螃，因此該子元素將變成橙色。第二個(gè)ul有多個(gè)子元素揩徊，因此其子元素不會(huì)受: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偽類選擇同級(jí)中類型唯一的元素，與:only-child類似塑荒，但針對(duì)特定類型的元素熄赡，讓選擇符有了更強(qiáng)的意義。

在下面的例子中齿税，第一個(gè)ul只有一個(gè)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偽類通過(guò)元素的 ID 及 URL 中的錨名稱選擇元素凌箕。

在下面的例子中拧篮，當(dāng)瀏覽器中的 URL 以#target結(jié)尾時(shí)，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:的簡(jiǎn)寫形式串绩，用于指定顏色時(shí)效果一樣。

驗(yàn)證偽類

表單驗(yàn)證一直是 Web 設(shè)計(jì)與開始中最不好搞的芜壁。有了驗(yàn)證偽類礁凡，可以讓用戶填寫表單的過(guò)程更平順高氮。

有一點(diǎn)要注意，雖然本節(jié)介紹的偽類都用于表單元素顷牌，但其中有的偽類也可以用于其他 HTML 元素剪芍。

下面就來(lái)看看這些偽類吧！

:CHECKED

:checked偽類選擇被勾選或選中的單選按鈕窟蓝、多選按鈕及列表選項(xiàng)罪裹。

在下面的例子中，復(fù)選框被勾選后疗锐，標(biāo)簽會(huì)突出顯示坊谁，增加了用戶體驗(yàn)。

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

:DEFAULT

:default偽類從表單中一組類似元素里選擇默認(rèn)的元素（即“提交”按鈕滑臊】谏郑——譯者注）。

如果要選擇表單中沒有類的默認(rèn)按鈕雇卷，可以使用:default鬓椭。

注意，在表單中使用 Reset 或 Clear 按鈕會(huì)招致嚴(yán)重的可用性問題关划，所以除非絕對(duì)必要再用小染。參考下面兩篇文章：

• “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

相關(guān)鏈接

css 偽類元素詳解(一)

css 偽類元素詳解(二)