溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“css3新增偽類選擇器是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
新增偽類選擇器有：1、“:root”，匹配文檔的根元素；2、“:first-child”，匹配父元素的第一個子元素；3、“:last-child”，匹配父元素的最后一個子元素；4、“:empty”，匹配空元素；5、“:target”等等。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
偽類選擇器的作用：對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。CSS 3提供的偽類選擇器主要分為以下三類：
結構性偽類選擇器
UI元素狀態偽類選擇器
其他偽類選擇器
1、結構性偽類選擇器
:root：匹配文檔的根元素。在HTML文檔中，根元素永遠是<html.../>元素。
:first-child：匹配符合選擇器，且必須是其父元素的第一個子節點的元素。
:last-child：匹配符合選擇器，且必須是其父元素的最后一個子節點的元素。
:nth-child(n)：匹配符合選擇器，且必須是其父元素的第n個子節點的元素。
:nth-last-child(n)：匹配符合選擇器，且必須是其父元素的倒數第n個子節點的元素。
:only-child：匹配符合選擇器，且必須是其父元素的唯一子節點的元素。
:first-of-type：匹配符合選擇器，且是與它同類型、同級的兄弟元素中的第一個元素。
:last-of-type：匹配符合選擇器，且是與它同類型、同級的兄弟元素中的最后一個元素。
:nth-of-type(n)：匹配符合選擇器，且是與它同類型、同級的兄弟元素中的第n個元素。
:nth-last-of-type(n)：匹配符合選擇器，且是與它同類型、同級的兄弟元素中的倒數第n個元素
:only-of-type：匹配符合選擇器，且是與它同類型、同級的兄弟元素中的唯一一個元素。
:empty：匹配符合選擇器，且其內部沒有任何子元素（包括文本節點）的元素。
:lang(lang)：匹配符合選擇器，且內容是特定語言的元素。
對于：nth-child和:nth-last-child兩個偽類選擇器，還支持如下用法。
:nth-child(odd/event)：匹配符合選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素
:nth-last-child(odd/event)：匹配符合選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素
:nth-child(xn y)：匹配符合選擇器，且必須是其父元素的第xn y個子節點的元素
:nth-last-child(xn y)：匹配符合選擇器，且必須是其父元素的第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) {
background-color: #FFC0CB;
}
</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元素狀態偽類選擇器包含有：
:enabled：匹配所有用戶界面（form表單）中處于可用狀態的元素
:disabled：匹配所有用戶界面（form表單）中處于不可用狀態的元素
:checked：匹配所有用戶界面（form表單）中處于選中狀態的元素
::selection(該選擇器前面有兩個冒號)：匹配元素中被用戶選中或處于高亮狀態的部分
3、其他偽類選擇器
3.1：target偽類選擇器（匹配符合選擇器且必須是命名錨點目標的元素）
要求元素必須是命名錨點的目標，且必須是當前正在訪問的目標。它的作用是頁面可通過該選擇器高亮顯示正在被訪問的目標。下面示范了: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">
<h3>瘋狂Java講義</h3>
<p>本書詳細介紹了Java語言各方面的內容。</p>
</div>
<div id="ee">
<h3>輕量級Java EE企業應用實戰</h3>
<p>本書詳細介紹Struts 2、Spring 3、Hibernate三個框架整合開發的知識</p>
</div>
<div id="android">
<h3>瘋狂Android講義</h3>
<p>本書詳細介紹了Android應用開發的知識。</p>
</div>
<div id="ejb">
<h3>經典Java EE企業應用實戰</h3>
<p>本書詳細介紹JSF 、EJB 3、JPA等Java EE相關的知識</p>
</div>
</body>
3.2：not偽類選擇器（匹配符合1選擇器但不符合2選擇器的元素，相當于用1減去2）
下面頁面代碼示范了: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表示的顏色，且字體加粗顯示。
“css3新增偽類選擇器是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
