有用的CSS偽選擇器有哪些

這篇文章主要講解了“有用的CSS偽選擇器有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“有用的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元素。

感謝各位的閱讀，以上就是“有用的CSS偽選擇器有哪些”的內容了，經過本文的學習后，相信大家對有用的CSS偽選擇器有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！