偽元素&偽類

css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。

偽元素&偽類：

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

  • 偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。比如說，當(dāng)用戶懸停在指定的元素時(shí)，我們可以通過:hover來描述這個(gè)元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。

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

偽元素&偽類的特點(diǎn)：
  • 偽元素和偽類都不會(huì)出現(xiàn)在源文檔或者文檔樹中
  • 偽類允許出現(xiàn)在選擇器的任何位置，而一個(gè)偽元素只能跟在選擇器的最后一個(gè)簡(jiǎn)單選擇器后面
  • 偽元素名和偽類名都是大小寫不敏感的
  • 有些偽類是互斥的，而其它的可以同時(shí)用在一個(gè)元素上。（在規(guī)則沖突的情況下，常規(guī)層疊順序決定結(jié)果）。
偽元素和偽類的區(qū)別：
  • 偽類的操作對(duì)象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素。

偽元素：

  • 偽元素用于創(chuàng)建一些不在文檔樹中的元素并為其添加樣式。


    image.png
單雙冒號(hào)：
  1. E::before/E:before在E元素內(nèi)部創(chuàng)建一個(gè)行內(nèi)元素，作為E的第一個(gè)孩子,需要使用content屬性來指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹中;
  2. E::after/E:after 在E元素內(nèi)部創(chuàng)建一個(gè)行內(nèi)元素，作為E的最后一個(gè)孩子,其用法和特性與:before相似;
  3. E::first-letter/E:first-letter匹配E元素內(nèi)容的第一個(gè)字母,被修飾的首字母不在文檔樹中;
  4. E::first-lineE/:first-line 匹配E元素內(nèi)容的第一行,這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中
雙冒號(hào)：
  1. E::selection應(yīng)用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）改變字體大小，添加背景色等等,在火狐瀏覽器使用時(shí)需要添加-moz前綴。該偽元素只支持雙冒號(hào)的形式；
::-moz-selection {
    color: orange;
    background: #333;
}
::selection  {
    color: orange;
    background: #333;
}
  1. E::placeholder匹配占位符的文本，只有元素設(shè)置了placeholder屬性時(shí)，該偽元素才能生效;用于修改input默認(rèn)的灰色文字的樣式，字體大小和字體顏色等等；為了瀏覽器兼容性，一般寫為： input::-webkit-input-placeholder,
    該偽元素不是CSS的標(biāo)準(zhǔn)，它的實(shí)現(xiàn)可能在將來會(huì)有所改變，所以要決定使用時(shí)必須謹(jǐn)慎。在一些瀏覽器中（IE10和Firefox18及其以下版本）會(huì)使用單冒號(hào)的形式；
<input type="email" placeholder="name@domain.com">

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;
}
  1. E::backdorp是在任何處于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的層級(jí)更低的元素之上）,用于改變?nèi)聊Ｊ较碌谋尘邦伾聊Ｊ降哪J(rèn)顏色為黑色。該偽元素只支持雙冒號(hào)的形式,該偽類用得少，兼容性差，甚至許多瀏覽器并未使用該功能）
<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>

h1:fullscreen::backdrop {
    background: orange;
}
  • CSS3規(guī)范中的要求使用雙冒號(hào)(::)表示偽元素，以此來區(qū)分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(hào)(::)，:hover和:active等偽類使用單冒號(hào)(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(hào)(::)表示方法。然而，除了少部分偽元素，如::backdrop必須使用雙冒號(hào)，大部分偽元素都支持單冒號(hào)和雙冒號(hào)的寫法，比如::after，寫成:after也可以正確運(yùn)行；但是為了向后兼容，目前在考慮兼容性的情況下可以使用單冒號(hào)的寫法，但是也建議全都使用雙冒號(hào)；
  • 使用::before和::after為了節(jié)省標(biāo)簽，其中content不可或缺但是可以是空字符；可以用于清除浮動(dòng)，替換標(biāo)簽。
  • 某些偽類或偽元素仍然處于試驗(yàn)階段，在使用前建議先在Can I Use等網(wǎng)站查一查其瀏覽器兼容性。

偽類：

  • CSS 偽類是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。例如，:hover可被用于在用戶將鼠標(biāo)懸停在按鈕上時(shí)改變按鈕的顏色。


    image.png
狀態(tài):
  1. :link用于選擇未訪問的鏈接；
  2. :visited用于選擇已訪問的鏈接；
  3. :hover用于選擇鼠標(biāo)指針浮動(dòng)在其上的元素；
  4. :active用于選擇活動(dòng)的鏈接；
  5. :focus用于選擇獲取焦點(diǎn)的輸入字段。
結(jié)構(gòu)化：
  1. :not是一個(gè)否定偽類，用于匹配不符合參數(shù)選擇器的元素。
<ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

li:not(.first-item) {
    color: orange;
}
  • 上述列表除了第一個(gè)<li>元素外，其他<li>元素的文本都會(huì)變?yōu)槌壬?/li>
  1. :first-child用于匹配元素的第一個(gè)子元素。
  2. : last-child用于匹配元素的最后一個(gè)子元素。
  3. ：first-of-type用于匹配屬于其父元素的首個(gè)特定類型的子元素的每個(gè)元素。
  4. :last-of-type用于匹配元素的最后一個(gè)子元素。
  5. :nth-child根據(jù)元素的位置匹配一個(gè)或者多個(gè)元素，它接受一個(gè)an+b形式的參數(shù)，an+b匹配到的元素示例如下：
    • 1n+0，或n，匹配每一個(gè)子元素。
    • 2n+0，或2n，匹配位置為2、4、6、8…的子元素，該表達(dá)式與關(guān)鍵字even等價(jià)。
    • 2n+1匹配位置為1、3、5、7…的子元素、該表達(dá)式與關(guān)鍵字odd等價(jià)。
    • 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:
選擇第二個(gè)元素，”Beta”會(huì)變成橙色：

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

選擇位置序號(hào)是2的倍數(shù)的元素，”Beta”, “Delta”, “Zeta”, “kappa”會(huì)變成橙色:

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

選擇位置序號(hào)為偶數(shù)的元素：

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

選擇從第6個(gè)開始，位置序號(hào)是2的倍數(shù)的元素，”Zeta”, “Theta”, “Kappa”會(huì)變成橙色：

ol :nth-child(2n+6) {
    color: orange;
}
  1. :nth-last-child與:nth-child相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的。
  2. :nth-of-type與nth-child相似，不同之處在于它是只匹配特定類型的元素。
    如下例，第二個(gè)<p>元素會(huì)變?yōu)槌壬?/li> 
HTML:

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

p:nth-of-type(2) {
    color: orange;
}
  1. :nth-last-of-type與nth-of-type相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的。
  2. 當(dāng)元素是其父元素中唯一一個(gè)子元素時(shí)，:only-child匹配該元素。
<ul>
    <li>這里的文本是橙色的</li>
</ul>
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

ul :only-child {
    color: orange;
}
  1. :only-of-type用于當(dāng)元素是其父元素中唯一一個(gè)特定類型的子元素時(shí)，:only-child匹配該元素。
    如下例，第一個(gè)ul元素只有一個(gè)li類型的元素，該li元素的文本會(huì)變?yōu)槌壬?/li> 
<ul>
    <li>這里的文本是橙色的</li>
    <p>這里不是橙色</p>
</ul> 
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

li:only-of-type {
    color: orange;
}
  1. :target是當(dāng)該頁(yè)面的URL帶有錨名稱，指向文檔內(nèi)某個(gè)具體的元素時(shí)，:target匹配該元素。
    如下例，url中的target命中id值為target的article元素，article元素的背景會(huì)變?yōu)辄S色。
URL:
http://example.com/#target

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

:target {
    background: yellow;
}
表單相關(guān)：
  1. :checked匹配被選中的input元素，這個(gè)input元素包括radio和checkbox。
    如下例，當(dāng)復(fù)選框被選中時(shí)，與其相鄰的<label>元素的背景會(huì)變成黃色。
<input type="checkbox"/>
<label>我同意</label>

input:checked + label {
    background: yellow;
}
  1. :default匹配默認(rèn)選中的元素，例如：提交按鈕總是表單的默認(rèn)按鈕。
    如下例，只有提交按鈕的背景變成了黃色。
<form action="#">
    <button>重置</button>
    <button type="submit">提交</button>
</form>

:default  {
    background: yellow;
}
  1. :disabled匹配禁用的表單元素。

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

<input type="text" disabled/>

:disabled {
    opacity: .5;
}
  1. :empty匹配沒有子元素的元素。如果元素中含有文本節(jié)點(diǎn)、HTML元素或者一個(gè)空格，則:empty不能匹配這個(gè)元素。
    如下例，:empty能匹配的元素會(huì)變?yōu)辄S色。
    第一個(gè)元素中有文本節(jié)點(diǎn)，所以其背景不會(huì)變成黃色；
    第二個(gè)元素中有一個(gè)空格，有空格則該元素不為空，所以其背景不會(huì)變成黃色；
    第三個(gè)元素中沒有任何內(nèi)容，所以其背景會(huì)變成黃色；
    第四個(gè)元素中只有一個(gè)注釋，此時(shí)該元素是空的，所以其背景會(huì)變成黃色；
<div>這個(gè)容器里的背景是橙色的</div>
<div> </div>
<div></div>
<div><!-- This comment is not considered content --></div>

div {
    background: orange;
    height: 30px;
    width: 200px;
}
div:empty {
    background: yellow;
}
  1. :enabled用于匹配沒有設(shè)置disabled屬性的表單元素。
  2. :in-range匹配在指定區(qū)域內(nèi)元素。
    如下例，當(dāng)數(shù)字選擇器的數(shù)字在5到10是，數(shù)字選擇器的邊框會(huì)設(shè)為綠色。
<input type="number" min="5" max="10">

input[type=number] {
    border: 5px solid orange;
}
input[type=number]:in-range {
    border: 5px solid green;
}
  1. :out-of-range與:in-range相反，它匹配不在指定區(qū)域內(nèi)的元素。
  2. indeterminate的英文意思是“不確定的”。當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時(shí)，:indeterminate匹配該組中所有的單選框或復(fù)選框。
    如下例，當(dāng)下面的一組單選框沒有一個(gè)處于被選中時(shí)，與input相鄰的label元素的背景會(huì)被設(shè)為橙色。
<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>

:indeterminate + label {
    background: orange;
}
  1. :valid匹配條件驗(yàn)證正確的表單元素。
    如下例，當(dāng)email輸入框內(nèi)的值符合email格式時(shí)，輸入框的邊框會(huì)被設(shè)為綠色。
<input type="email"/>

input[type=email]:valid {
    border: 1px solid green;
}
  1. :invalid與:valid相反，匹配條件驗(yàn)證錯(cuò)誤的表單元素。
  2. :optional用于匹配是具有optional屬性的表單元素。當(dāng)表單元素沒有設(shè)置為required時(shí)，即為optional屬性。
    如下例，第一個(gè)input的背景不會(huì)被設(shè)為黃色，第二個(gè)input的背景會(huì)被設(shè)為黃色。
<input type="text" required />
<input type="text" />

:optional {
    background: yellow;
}

  1. :required與:optional相反匹配設(shè)置了required屬性的表單元素。

  2. :read-only匹配設(shè)置了只讀屬性的元素，表單元素可以通過設(shè)置“readonly”屬性來定義元素只讀。
    如下例，input元素的背景會(huì)被設(shè)為黃色。

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

put:read-only {
    background-color: yellow;
}
  1. :read-write匹配處于編輯狀態(tài)的元素。input，textarea和設(shè)置了contenteditable的HTML元素獲取焦點(diǎn)時(shí)即處于編輯狀態(tài)。
    如下例，input輸入框和副文本框獲取焦點(diǎn)時(shí)，背景變成黃色。
<input type="text" value="獲取焦點(diǎn)時(shí)背景變黃"/>
 
<div class="editable" contenteditable>
    <h1>點(diǎn)擊這里可以編輯</h1>
    <p>獲取焦點(diǎn)時(shí)背景變黃</p>
</div>

:read-write:focus {
    background: yellow;
}
  1. :scope(處于試驗(yàn)階段)匹配處于style作用域下的元素。當(dāng)style沒有設(shè)置scope屬性時(shí)，style內(nèi)的樣式會(huì)對(duì)整個(gè)html起作用。
    如下例，第二個(gè)section中的元素的文本會(huì)變?yōu)樾斌w。
<article>
    <section>
        <h1>很正常的一些文本</h1>
        <p>很正常的一些文本</p>
    </section>
    <section>
        <style scoped>
            :scope {
                font-style: italic;
            }
        </style>
        <h1>這里的文本是斜體的</h1>
        <p>這里的文本是斜體的</p>
    </section>
</article>
注：目前支持這個(gè)偽類的瀏覽器只有火狐。
語言相關(guān)
  1. :dir(處于實(shí)驗(yàn)階段)匹配指定閱讀方向的元素，當(dāng)HTML元素中設(shè)置了dir屬性時(shí)該偽類才能生效?，F(xiàn)時(shí)支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。目前，只有火狐瀏覽器支持:dir偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴( -moz-dir() )。
    如下例，p元素中的阿拉伯語（阿拉伯語是從右往左閱讀的）文本會(huì)變成橙色。
<article dir="rtl">
<p>??????? ???? ?? ???? ?????? ?????? ???? ????? ??????? ????? ??? ???????? ?????? ?????? ??? ????? ?????.</p>
</article>

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

如下例，p元素中的英語文本會(huì)變成藍(lán)色

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

article :-moz-dir(ltr) {
    color: blue;
}
 
/* unprefixed */
article :dir(ltr) {
    color: blue;
}
  1. :lang匹配設(shè)置了特定語言的元素，設(shè)置特定語言可以通過為了HTML元素設(shè)置lang=””屬性，設(shè)置meta元素的charset=””屬性，或者是在http頭部上設(shè)置語言屬性。實(shí)際上，lang=””屬性不只可以在html標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置。
    如下例，分別給不同的語言設(shè)置不同的引用樣式：
<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>

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '?' '?'; }
:lang(de) q { quotes: '?' '?'; }
其他
  1. :root匹配文檔的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素則可能是其他元素。
    如下例，將html元素的背景設(shè)置為橙色
:root {
    background: orange;
}
  1. :fullscreen匹配處于全屏模式下的元素。全屏模式不是通過按F11來打開的全屏模式，而是通過Javascript的Fullscreen API來打開的，不同的瀏覽器有不同的Fullscreen API。目前，:fullscreen需要添加前綴才能使用。
    如下例，當(dāng)處于全屏模式時(shí)，h1元素的背景會(huì)變成橙色
<h1 id="element">在全屏模式下，這里的文本的背景會(huì)變成橙色.</h1>
<button>進(jìn)入全屏模式!</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;
}

參考文章

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容