[[340274]]

這篇文章鼓勵(lì)構(gòu)造 UI 時(shí)使用更多純 CSS 和更少的 JS。熟悉所有的 CSS 是實(shí)現(xiàn)這個(gè)目標(biāo)的一種方法 —— 另一種是實(shí)施最佳實(shí)踐和盡可能的減少代碼。

1、::first-line | 選擇首行文本

這個(gè)偽元素選擇器選擇換行之前文本的首行。

p:first-line { 
    color: lightcoral; 
} 

2、::first-letter | 選擇首字母

這個(gè)偽元素選擇器應(yīng)用于元素中文本的首字母。

.innerDiv p:first-letter { 
    color: lightcoral; 
    font-size: 40px 
} 

3、::selection | 選擇高亮（被選中）的區(qū)域

應(yīng)用于任何被用戶選中的高亮區(qū)域。通過 ::selection 偽元素選擇器，我們可以將樣式應(yīng)用于高亮區(qū)域。

div::selection { 
    background: yellow; 
} 

4、:root | 根元素

:root 偽類選中文檔的根元素。在 HTML 中，為 HTML 元素。在 RSS 中，則為 RSS 元素.這個(gè)偽類選擇器應(yīng)用于根元素，多用于存儲(chǔ)全局 CSS 自定義屬性。

5、:empty | 僅當(dāng)元素為空時(shí)觸發(fā)

這個(gè)偽類選擇器將選中沒有任何子項(xiàng)的元素。該元素必須為空。如果一個(gè)元素沒有空格、可見的內(nèi)容、后代元素，則為空元素。

div:empty { 
    border: 2px solid orange; 
} 
 
<div></div> 
<div></div> 
<div> 
</div> 

這個(gè)規(guī)則將應(yīng)用于空的 div 元素。這個(gè)規(guī)則將應(yīng)用于第一個(gè)和第二個(gè) div ，因?yàn)樗麄兪钦鏋榭?，而第三個(gè) div 包含空格。

6、:only-child | 選擇僅有的子元素

匹配父元素中沒有任何兄弟元素的子元素。

.innerDiv p:only-child { 
    color: orangered; 
} 

7、:first-of-type | 選擇第一個(gè)指定類型的子元素

.innerDiv p:first-of-type { 
    color: orangered; 
} 

這將應(yīng)用于 .innerDiv 下的第一個(gè) p 元素。

<div class="innerDiv"> 
    <div>Div1</div> 
    <p>These are the necessary steps</p> 
    <p>hiya</p> 
     
    <p> 
        Do <em>not</em> push the brake at the same time as the accelerator. 
    </p> 
    <div>Div2</div> 
</div> 

這個(gè) p （“These are the necessary step”）將被選中。

8、:last-of-type | 選擇最后一個(gè)指定類型的子元素

像 :first-of-type 一樣，但是會(huì)應(yīng)用于最后一個(gè)同類型的子元素。

.innerDiv p:last-of-type { 
    color: orangered; 
} 

這將應(yīng)用于 innerDiv 下的最后一個(gè) p 段落元素。

<div class="innerDiv"> 
    <p>These are the necessary steps</p> 
    <p>hiya</p> 
    <div>Div1</div> 
    <p> 
        Do the same. 
    </p> 
    <div>Div2</div> 
</div> 

因此，這個(gè) p 元素（“Do the same”）將被選中。

9、:nth-of-type() | 選擇特定類型的子元素

這個(gè)選擇器將從指定的父元素的孩子列表中選擇某種類型的子元素。

.innerDiv p:nth-of-type(1) { 
    color: orangered; 
} 

10、:nth-last-of-type() | 選擇列表末尾中指定類型的子元素

這將選擇最后一個(gè)指定類型的子元素。

.innerDiv p:nth-last-of-type() { 
    color: orangered; 
} 

這將選擇 innerDiv 列表元素中包含的最后一個(gè)段落類型子元素。

<div class="innerDiv"> 
    <p>These are the necessary steps</p> 
    <p>hiya</p> 
    <div>Div1</div> 
    <p> 
        Do the same. 
    </p> 
    <div>Div2</div> 
</div> 

innerDiv 中最后一個(gè)段落子元素 p （“Do the same”）將會(huì)被選中。

11、:link | 選擇一個(gè)未訪問過的超鏈接

這個(gè)選擇器應(yīng)用于未被訪問過的鏈接。常用于帶有 href 屬性的 a 錨元素。

a:link { 
    color: orangered; 
} 
 
<a href="/login">Login<a> 

這將選中未被點(diǎn)擊過帶有 href 的指定界面的 a 錨點(diǎn)元素，選中的元素中的文字將會(huì)顯示為橙色。

12、:checked | 選擇一個(gè)選中的復(fù)選框

這個(gè)應(yīng)用于已經(jīng)被選中的復(fù)選框。

input:checked { 
    border: 2px solid lightcoral; 
} 

這個(gè)規(guī)則應(yīng)用到所有被選中的復(fù)選框。

13、:valid | 選擇一個(gè)通過驗(yàn)證的元素

這主要用于可視化表單元素，以讓用戶判斷是否驗(yàn)證通過。驗(yàn)證通過時(shí)，默認(rèn)元素帶有 valid屬性。

input:valid { 
    boder-color: lightsalmon; 
} 

14、:invalid | 選擇一個(gè)未通過驗(yàn)證的元素

像 :valid 一樣，但是會(huì)應(yīng)用到未通過驗(yàn)證的元素。

input[type="text"]:invalid { 
    border-color: red; 
} 

15、:lang() | 選擇指定語言的元素

應(yīng)用于指定了語言的元素?？梢酝ㄟ^以下兩種方式使用：

p:lang(fr) { 
    background: yellow; 
} 

或者

p[lang|="fr"] { 
    background: yellow; 
} 
 
<p lang="fr">Paragraph 1</p> 

16、:not() | 對(duì)于選擇取反（這是一個(gè)運(yùn)算符）

否定偽類選擇器選中相反的。讓我們看一個(gè)示例：

.innerDiv :not(p) { 
    color: lightcoral; 
} 
 
<div class="innerDiv"> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
    <div>Div 1</div> 
    <p>Paragraph 3</p> 
    <div>Div 2</div> 
</div> 

Div 1 和 Div 2 會(huì)被選中，因?yàn)樗麄儾皇?p 元素。

結(jié)論

就這些了。這是全部?jī)?nèi)容。還有更多的偽選擇器，但是為非標(biāo)準(zhǔn)的，因此我省略了它們。感謝閱讀