css3新增偽類選擇器是什么

發(fā)布時(shí)間：2022-04-25 15:35:52 來源：億速云閱讀：186 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“css3新增偽類選擇器是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

新增偽類選擇器有：1、“:root”，匹配文檔的根元素；2、“:first-child”，匹配父元素的第一個(gè)子元素；3、“:last-child”，匹配父元素的最后一個(gè)子元素；4、“:empty”，匹配空元素；5、“:target”等等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

結(jié)構(gòu)性偽類選擇器
UI元素狀態(tài)偽類選擇器
其他偽類選擇器

1、結(jié)構(gòu)性偽類選擇器

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

對(duì)于：nth-child和:nth-last-child兩個(gè)偽類選擇器，還支持如下用法。
　　:nth-child(odd/event)：匹配符合選擇器，且必須是其父元素的第奇數(shù)個(gè)/偶數(shù)個(gè)子節(jié)點(diǎn)的元素
　　:nth-last-child(odd/event)：匹配符合選擇器，且必須是其父元素的第奇數(shù)個(gè)/偶數(shù)個(gè)子節(jié)點(diǎn)的元素
　　:nth-child(xn y)：匹配符合選擇器，且必須是其父元素的第xn y個(gè)子節(jié)點(diǎn)的元素
　　:nth-last-child(xn y)：匹配符合選擇器，且必須是其父元素的第xn y個(gè)子節(jié)點(diǎn)的元素

使用: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">
        /* 定義對(duì)作為其父元素的倒數(shù)第3n 1個(gè)（1、4、7）子節(jié)點(diǎn)
            的li元素起作用的CSS樣式 */
        li:nth-last-child(3n+1) {
           background-color: #FFC0CB;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">Java</li>
    <li id="javaee">輕量級(jí)Java EE</li>
    <li id="ajax">Ajax</li>
    <li id="xml">XML</li>
    <li id="ejb">經(jīng)典Java EE</li>
    <li id="android">Android</li>
</ul>
</body>

其效果如下：

css3新增偽類選擇器是什么

2、UI元素狀態(tài)偽類選擇器

UI元素狀態(tài)偽類選擇器包含有：

:enabled：匹配所有用戶界面（form表單）中處于可用狀態(tài)的元素
:disabled：匹配所有用戶界面（form表單）中處于不可用狀態(tài)的元素
:checked：匹配所有用戶界面（form表單）中處于選中狀態(tài)的元素
::selection(該選擇器前面有兩個(gè)冒號(hào))：匹配元素中被用戶選中或處于高亮狀態(tài)的部分

3、其他偽類選擇器

3.1：target偽類選擇器（匹配符合選擇器且必須是命名錨點(diǎn)目標(biāo)的元素）

　　　　要求元素必須是命名錨點(diǎn)的目標(biāo)，且必須是當(dāng)前正在訪問的目標(biāo)。它的作用是頁面可通過該選擇器高亮顯示正在被訪問的目標(biāo)。下面示范了: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">輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</a> |
		<a href="#android">瘋狂Android講義</a> |
		<a href="#ejb">經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</a>
	</p>
	<div id="java">
		<h3>瘋狂Java講義</h3>
		<p>本書詳細(xì)介紹了Java語言各方面的內(nèi)容。</p>
	</div>
	<div id="ee">
		<h3>輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</h3>
		<p>本書詳細(xì)介紹Struts 2、Spring 3、Hibernate三個(gè)框架整合開發(fā)的知識(shí)</p>
	</div>
	<div id="android">
		<h3>瘋狂Android講義</h3>
		<p>本書詳細(xì)介紹了Android應(yīng)用開發(fā)的知識(shí)。</p>
	</div>
	<div id="ejb">
		<h3>經(jīng)典Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</h3>
		<p>本書詳細(xì)介紹JSF 、EJB 3、JPA等Java EE相關(guān)的知識(shí)</p>
	</div>
</body>

css3新增偽類選擇器是什么

3.2：not偽類選擇器（匹配符合1選擇器但不符合2選擇器的元素，相當(dāng)于用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">輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)</li>
		<li id="ajax">瘋狂Ajax講義</li>
		<li id="xml">瘋狂XML講義</li>
		<li id="android">瘋狂Android講義</li>
	</ul>
</body>

css3新增偽類選擇器是什么

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

“css3新增偽類選擇器是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

css3新增偽類選擇器是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽