當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3新增的伪类选择器

發布時間：2023/12/2 CSS 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3新增的伪类选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　偽類選擇器的作用：對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。CSS 3提供的偽類選擇器主要分為以下三類：

結構性偽類選擇器
UI元素狀態偽類選擇器
其他偽類選擇器

1、結構性偽類選擇器

Selector:root：匹配文檔的根元素。在HTML文檔中，根元素永遠是<html.../>元素。
Selector:first-child：匹配符合Selector選擇器，且必須是其父元素的第一個子節點的元素。
Selector:last-child：匹配符合Selector選擇器，且必須是其父元素的最后一個子節點的元素。
Selector:nth-child(n)：匹配符合Selector選擇器，且必須是其父元素的第n個子節點的元素。
Selector:nth-last-child(n)：匹配符合Selector選擇器，且必須是其父元素的倒數第n個子節點的元素。
Selector:only-child：匹配符合Selector選擇器，且必須是其父元素的唯一子節點的元素。
Selector:first-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第一個元素。
Selector:last-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的最后一個元素。
Selector:nth-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第n個元素。
Selector:nth-last-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的倒數第n個元素
Selector:only-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的唯一一個元素。
Selector:empty：匹配符合Selector選擇器，且其內部沒有任何子元素（包括文本節點）的元素。
Selector:lang(lang)：匹配符合Selector選擇器，且內容是特定語言的元素。

對于：nth-child和:nth-last-child兩個偽類選擇器，還支持如下用法。

　　Selector:nth-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素

　　Selector:nth-last-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素

　　Selector:nth-child(xn y)：匹配符合Selector選擇器，且必須是其父元素的第xn y個子節點的元素

　　Selector:nth-last-child(xn y)：匹配符合Selector選擇器，且必須是其父元素的第xn y個子節點的元素

使用:nth-last-child偽類選擇器的示例如下：

<head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> child </title><style type="text/css">/* 定義對作為其父元素的倒數第3n 1個（1、4、7）子節點的li元素起作用的CSS樣式 */li:nth-last-child(3n 1) {border: 1px solid black;}</style> </head> <body> <ul><li id="java">Java</li><li id="javaee">輕量級Java EE</li><li id="ajax">Ajax</li><li id="xml">XML</li><li id="ejb">經典Java EE</li><li id="android">Android</li> </ul> </body>

其效果如下：

2、UI元素狀態偽類選擇器

　　UI元素狀態偽類選擇器包含有：Selector:link、Selector:visited、Selector:active、Selector:hover、Selector:focus、Selector:enabled、Selector:disabled、Selector:checked、Selector:default、Selector:indeterminate、Selector:read-only、Selector:read-write、Selector:required、Selector:optional、Selector:valid、Selector:invalid、Selector:in-range、Selector:out-of-range、Selector::selection(該選擇器前面有兩個冒號)。

3、其他偽類選擇器

　　3.1：target偽類選擇器（匹配符合Selector選擇器且必須是命名錨點目標的元素）

　　　　要求元素必須是命名錨點的目標，且必須是當前正在訪問的目標。它的作用是頁面可通過該選擇器高亮顯示正在被訪問的目標。下面示范了:target選擇器的用法（該代碼為《瘋狂HTML 5 CSS 3 JavaScript講義》中的示例代碼）

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :target </title><style type="text/css">:target{background-color: #ff0;}</style> </head> <body> <p id="menu"> <a href="#java">瘋狂Java講義</a> | <a href="#ee">輕量級Java EE企業應用實戰</a> | <a href="#android">瘋狂Android講義</a> | <a href="#ejb">經典Java EE企業應用實戰</a> </p> <div id="java"> <h2>瘋狂Java講義</h2> <p>本書詳細介紹了Java語言各方面的內容。</p> </div> <div id="ee"> <h2>輕量級Java EE企業應用實戰</h2> <p>本書詳細介紹Struts 2、Spring 3、Hibernate三個框架整合開發的知識</p> </div> <div id="android"> <h2>瘋狂Android講義</h2> <p>本書詳細介紹了Android應用開發的知識。</p> </div> <div id="ejb"> <h2>經典Java EE企業應用實戰</h2> <p>本書詳細介紹JSF 、EJB 3、JPA等Java EE相關的知識</p> </div> </body>

?下面顯示的是點擊了“瘋狂Java講義”鏈接后顯示的效果

　　3.2：not偽類選擇器（匹配符合Selector1選擇器但不符合Selector2選擇器的元素，相當于用Selector1減去Selector2）

　　　　下面頁面代碼示范了:not選擇器的用法：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> :not </title><style type="text/css">li:not(#ajax) {color: #999;font-weight: bold;}</style> </head> <body> <ul><li id="java">瘋狂Java講義</li><li id="javaee">輕量級Java EE企業應用實戰</li><li id="ajax">瘋狂Ajax講義</li><li id="xml">瘋狂XML講義</li><li id="android">瘋狂Android講義</li> </ul> </body>

從運行結果可以看到，除了id為ajax的所有<li.../>元素字體設置為#999表示的顏色，且字體加粗顯示。

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS3新增的伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

选择器