[[340274]]

這篇文章鼓勵構造 UI 時使用更多純 CSS 和更少的 JS。熟悉所有的 CSS 是實現這個目標的一種方法 —— 另一種是實施最佳實踐和盡可能的減少代碼。

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

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

p:first-line { 
    color: lightcoral; 
} 

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

這個偽元素選擇器應用于元素中文本的首字母。

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

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

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

div::selection { 
    background: yellow; 
} 

4、:root | 根元素

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

5、:empty | 僅當元素為空時觸發

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

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

這個規則將應用于空的 div 元素。這個規則將應用于第一個和第二個 div ，因為他們是真為空，而第三個 div 包含空格。

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

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

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

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

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

這將應用于 .innerDiv 下的第一個 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> 

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

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

像 :first-of-type 一樣，但是會應用于最后一個同類型的子元素。

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

這將應用于 innerDiv 下的最后一個 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> 

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

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

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

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

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

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

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

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

<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 中最后一個段落子元素 p （“Do the same”）將會被選中。

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

這個選擇器應用于未被訪問過的鏈接。常用于帶有 href 屬性的 a 錨元素。

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

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

12、:checked | 選擇一個選中的復選框

這個應用于已經被選中的復選框。

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

這個規則應用到所有被選中的復選框。

13、:valid | 選擇一個通過驗證的元素

這主要用于可視化表單元素，以讓用戶判斷是否驗證通過。驗證通過時，默認元素帶有 valid屬性。

input:valid { 
    boder-color: lightsalmon; 
} 

14、:invalid | 選擇一個未通過驗證的元素

像 :valid 一樣，但是會應用到未通過驗證的元素。

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

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

應用于指定了語言的元素。可以通過以下兩種方式使用：

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

或者

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

16、:not() | 對于選擇取反（這是一個運算符）

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

.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 會被選中，因為他們不是 p 元素。

結論

就這些了。這是全部內容。還有更多的偽選擇器，但是為非標準的，因此我省略了它們。感謝閱讀