CSS偽類與偽元素完全指南

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

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

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

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

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

形容詞

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

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

不用管W3C是怎么定義的，反正偽類就是某個(gè)元素的一種虛擬狀態(tài)，或者說(shuō)一種特有的性質(zhì)，這種狀態(tài)或性可以通過(guò)CSS捕捉到。常見(jiàn)的偽類有：: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樹(shù)或DOM中并不實(shí)際存在。換句話說(shuō)，我們不會(huì)在HTML中包含偽元素，只會(huì)通過(guò)CSS來(lái)創(chuàng)建偽元素。

以下是幾個(gè)常見(jiàn)的偽元素：: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)。

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

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

請(qǐng)注意CSS3中表示偽元素使用雙冒號(hào)，比如a::after { … }，這是為了與偽類區(qū)分開(kāi)。偽類應(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為此寫(xiě)過(guò)一篇非常棒的文章。

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

實(shí)驗(yàn)性的偽類和偽元素，指的是那些不穩(wěn)定或沒(méi)最終定案的偽類和偽元素。它們的語(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

好啦，諸位，好戲開(kāi)場(chǎng)了！

偽類

首先，我們討論偽類，從狀態(tài)偽類開(kā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ò)鍵盤(pán)來(lái)激活，就像:focus偽類一樣。

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

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

a:active {
    color: rebeccapurple;
}

:FOCUS

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

a:focus {
    color: green;
}

或者：

input:focus {
    background: #eee;
}

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

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

（如果你不熟悉CSS預(yù)處理器，沒(méi)問(wèn)題，跳過(guò)這一節(jié)，直接看下一節(jié)吧。）

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

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

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

注意這個(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ú)法選擇的文檔樹(shù)或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è)子元素開(kāi)始，隔一個(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è)元素開(kāi)始，隔一個(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=""></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)槭菑哪┪查_(kāi)始，所以第1個(gè)段落會(huì)變成橙色。

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

相關(guān)資源

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

: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)寫(xiě)形式，用于指定顏色時(shí)效果一樣。

驗(yàn)證偽類

表單驗(yàn)證一直是Web設(shè)計(jì)與開(kāi)始中最不好搞的。有了驗(yàn)證偽類，可以讓用戶填寫(xiě)表單的過(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)的元素（即“提交”按鈕。——譯者注）。

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

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

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

:DISABLED

:disabled偽類選擇禁用狀態(tài)的表單元素。處于禁用狀態(tài)的元素，不能被選中、勾選，不能獲得焦點(diǎn)。

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

HTML:

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

CSS:

:disabled {
    opacity: .5;
}

提示： 標(biāo)記中是非要使用disabled="disabled"，只寫(xiě)一個(gè)disabled屬性就行了。在XHTML中，disabled="disabled"這種寫(xiě)法才是必須的。

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

:EMPTY

:empty偽類選擇其中不包含任何內(nèi)容的空元素。只要包含一個(gè)字母、其他HTML元素，甚至一個(gè)空格，都不算空。

關(guān)于空或非空，以下是定義：

  • 空
    元素中沒(méi)有內(nèi)容或字符。元素中包含HTML注釋不算有內(nèi)容。
  • 非空
    出現(xiàn)在元素中的字符。空格也算。

在下面的例子中，

  • 第一個(gè)元素中包含文本，因此背景不會(huì)變成橙色
  • 第二個(gè)元素包含一個(gè)空格，空格也是內(nèi)容，因此也不會(huì)有橙色背景
  • 第三個(gè)元素中什么也沒(méi)有（空的），因此背景為橙色
  • 最后一個(gè)元素中只有一個(gè)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偽類選擇啟用的元素。所有表單元素默認(rèn)都是啟用的，除非在標(biāo)記中添加了disabled屬性。

通過(guò):enabled和:disabled可以提供視覺(jué)上的反饋，改善用戶體驗(yàn)。

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

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

提示： 標(biāo)記中是非要使用enabled="enabled"，只寫(xiě)一個(gè)enabled屬性就行了。在XHTML中，enabled="enabled"這種寫(xiě)法才是必須的。

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

:IN-RANGE

:in-range偽類選擇有范圍且值在指定范圍內(nèi)的元素。

在下面的例子中，輸入元素支持輸入5~10。輸入值在這個(gè)范圍內(nèi)，會(huì)觸發(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。輸入值超出這個(gè)范圍內(nèi)，會(huì)觸發(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偽類選擇單選按鈕或復(fù)選框在頁(yè)面加載時(shí)沒(méi)有被勾選的。

比如，頁(yè)面加載后，一組單選按鈕中沒(méi)有默認(rèn)或預(yù)先勾選的，或者一個(gè)復(fù)選框已經(jīng)通過(guò)JavaScript設(shè)置為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輸入框中的電子郵箱格式是正確的，因此這個(gè)輸入框會(huì)被認(rèn)為有效，將出現(xiàn)1像素的綠色邊框：

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

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

:INVALID

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

在下面的例子中，email輸入框中的電子郵箱格式不正確，因此這個(gè)輸入框會(huì)被認(rèn)為無(wú)效，將出現(xiàn)橙色邊框：

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

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

:OPTIONAL

:optional偽類選擇表單中非必填的輸入字段。換句話說(shuō)，只要輸入字段中沒(méi)有required屬性，就會(huì)被:optional偽類選中。

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

HTML:

<input type="number">

CSS:

:optional {
    color: gray;
}

:READ-ONLY

:read-only偽類選擇用戶不能編輯的元素，與:disabled偽類相似，標(biāo)記中使用的屬性決定了使用哪個(gè)偽類。

不能編輯的元素可以用來(lái)顯示預(yù)先填好、不允許修改，但又需要連同表單一起提交的信息。

在下面的例子中，文本框有一個(gè)readonly屬性，因此會(huì)被: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元素。

有時(shí)候，可以與:focus偽類一塊使用以增強(qiáng)用戶體驗(yàn)。

在下面的例子中，點(diǎn)擊div元素就可以編輯其中的內(nèi)容，為此可以應(yīng)用特殊的樣式，讓用戶知道自己可以編輯其中的內(nèi)容。

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屬性的表單元素。

除了通過(guò)標(biāo)簽中的星號(hào)（*）提示必填，也可以通過(guò)這個(gè)偽類為輸入字段應(yīng)用樣式。這樣就萬(wàn)無(wú)一失了。

在下面的例子中，輸入框有required屬性，通過(guò)這個(gè)偽類為它應(yīng)用特殊樣式，可以提醒用戶它是必填項(xiàng)。

HTML:

<input type="email" required>

CSS:

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

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

:SCOPE (EXPERIMENTAL)

:scope偽類適用于style標(biāo)簽中有scoped屬性的情形。

如果頁(yè)面中某一部分的style標(biāo)簽里沒(méi)有scoped屬性，那么:scope偽類會(huì)一直向上查找，直到html元素，即當(dāng)前樣式表的默認(rèn)作用范圍。

在下面的例子中，第二個(gè)section中有一個(gè)scoped樣式表，因此這個(gè)section中的文本會(huì)變成斜體。

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

語(yǔ)言偽類

語(yǔ)言偽類與頁(yè)面中包含的文本相關(guān)，與圖片、視頻等媒體無(wú)關(guān)。

:DIR (EXPERIMENTAL)

:dir偽類選擇文檔中指定了語(yǔ)言方向的元素。換句話說(shuō)，為了使用:dir偽類，需要在標(biāo)記中為相關(guān)元素指定dir屬性。

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

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

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

在下面的例子中，段落中的文字是阿拉伯文（是從右往左書(shū)寫(xiě)的），因此其顏色是橙色。

HTML:

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

CSS:

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

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

下面段落中的文字是英文（從左到右），顏色為藍(lán)色。

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偽類選擇的元素通過(guò)lang=""屬性、相應(yīng)的meta元素以及HTTP首部的協(xié)議信息來(lái)確定。

lang=""屬性常用于html標(biāo)簽，其實(shí)也可以用于其他標(biāo)簽。

插一句，這里通常的做法是使用CSS的quotes 屬性來(lái)標(biāo)記特定的語(yǔ)言。不過(guò)，多數(shù)瀏覽器（包括IE9及更高版本）會(huì)在CSS中沒(méi)有聲明的情況下自動(dòng)添加適當(dāng)?shù)囊脴?biāo)記。

不過(guò)，自動(dòng)添加的引用標(biāo)記也可能不合適。因?yàn)闉g覽器自動(dòng)添加的與CSS添加的還不太一樣。

比如瀏覽器為德語(yǔ)（de）添加的引用標(biāo)記如下：

?Lorem ipsum dolor sit amet.“

但通過(guò)CSS為德語(yǔ)添加的引用標(biāo)簽則通常如下：

?Lorem ipsum dolor sit amet.?

這兩種都對(duì)。因此，使用瀏覽器自動(dòng)添加的引用標(biāo)記，還是自己通過(guò)CSS的:lang偽類及quotes屬性添加，都看你的需要。

下面看看怎么通過(guò)CSS來(lái)添加引用標(biāo)記。

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等標(biāo)記語(yǔ)言中，它可能選擇不同的元素。

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

:root {
    background: orange;
}

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

:FULLSCREEN (EXPERIMENTAL)

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

不過(guò)，這不適用于用戶按F11進(jìn)入的全屏模式，只適用于通過(guò)JavaScript Fullscreen API切換進(jìn)入的全屏模式，通常由父容器中的圖片、視頻或游戲來(lái)調(diào)用。

怎么知道已經(jīng)進(jìn)入全屏模式呢？一般瀏覽器會(huì)在窗口頂部提示你，并告訴你按Escape鍵可以退出全屏模式。

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

本文不會(huì)討論全屏API，只給出一個(gè)在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元素。但偽元素并不存在于文檔樹(shù)或DOM中，因此不能在HTML中輸入，只能通過(guò)CSS創(chuàng)建。

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

::BEFORE/:BEFORE

:before偽元素與:after類似，都可以為其他HTML元素添加內(nèi)容（文本或圖形）。同樣，這里的內(nèi)容并不實(shí)際存在于DOM中，但可以像存在一樣操作它們。需要在CSS中聲明content屬性。

記住，通過(guò)這個(gè)偽元素生成的內(nèi)容不能通過(guò)其他選擇符選中。

HTML:

<h1>Ricardo</h1>

CSS:

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

結(jié)果網(wǎng)頁(yè)中會(huì)變成這樣：

Hello Ricardo!

注意： 看到“Hello ”后面的空格了嗎？沒(méi)錯(cuò)，空格也算數(shù)。

::AFTER/:AFTER

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

同樣，通過(guò)這個(gè)偽元素添加的任何內(nèi)容都無(wú)法通過(guò)其他選擇符選中。

HTML:

<h1>Ricardo</h1>

CSS:

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

結(jié)果如下：

Ricardo, Web Designer!

::BACKDROP (EXPERIMENTAL)

::backdrop偽元素是在全屏元素后面生成的一個(gè)盒子，與:fullscreen偽類連用，修改全屏后元素的背景顏色。

注意： ::backdrop偽元素必須用雙冒號(hào)。

還看前面: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偽元素選擇一行文本第一個(gè)字符。

如果相應(yīng)行前面包含圖片、視頻或表格元素，那么不會(huì)影響選擇第一個(gè)字符。

這個(gè)偽元素非常適合對(duì)段落進(jìn)行排版，有了它就不必用圖片或其他技巧了。

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

CSS:

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

::FIRST-LINE/:FIRST-LINE

:first-line選擇元素的第一行，只適用于塊級(jí)元素，行內(nèi)元素不適用。

即使一段文本有多行，也會(huì)選中第一行。

CSS:

p:first-line {
    background: orange;
}

::SELECTION

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

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

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

CSS:

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

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

::PLACEHOLDER (EXPERIMENTAL)

::placeholder偽元素選擇表單元素中通過(guò)placeholder屬性設(shè)置的占位文本。

也可以寫(xiě)成::input-placeholder。

注意： 這個(gè)偽元素不是標(biāo)準(zhǔn)的，因此將來(lái)有可能會(huì)變化。

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

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

小結(jié)

CSS偽類和偽元素相當(dāng)有用，對(duì)不？這些偽類和偽元素提供了豐富的選擇便利。

不要光看，自己動(dòng)手試一試吧。廣受支持的偽類和偽元素是很靠譜的。

希望大家看了這篇長(zhǎng)文能有所收獲。別忘了收藏它！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解...
    張歆琳閱讀 1,874評(píng)論 4贊 26
  • 偽類： 偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的．比如說(shuō)，當(dāng)用戶...
    葶寳寳閱讀 954評(píng)論 1贊 13
  • 1. 偽類 & 偽元素 偽類和偽元素用來(lái)修飾不在文檔樹(shù)中的部分 偽類：用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)...
    楊慧莉閱讀 593評(píng)論 0贊 5
  • 人在江湖之中， 應(yīng)該樂(lè)觀寬容。 輕易不要生氣， 學(xué)會(huì)融匯貫通。
    渡岸孤山閱讀 463評(píng)論 4贊 22
  • string類型介紹與大多編程語(yǔ)言中的字符串類型一樣，Redis的字符串也是字符序列，它是Redis中最為基礎(chǔ)的數(shù)...
    dreamer_lk閱讀 890評(píng)論 0贊 3