更新時間:2021-09-23 來源:黑馬程序員 瀏覽量:
結(jié)構(gòu)化偽類選擇器是CSS3中新增加的選擇器。常用的結(jié)構(gòu)化偽類選擇器有：root選擇器、：not選擇器、：only-child選擇器、：first-child選擇器、：last-child選擇器、：nth-child(n)選擇器、：nth-last-child(n)選擇器、：nth-of-type(n)選擇器、：nth-last-of-type(n)選擇器、：empty選擇器、：target選擇器，下面我們一一講解。
:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說使用“:root選擇器”定義的樣式，對所有頁面元素都生效。對于不需要該樣式的元素，可以單獨(dú)設(shè)置樣式進(jìn)行覆蓋。
下面通過一個案例對:root選擇器的用法進(jìn)行演示，如下示。
JavaEE
鴻蒙應(yīng)用開發(fā)
集成電路應(yīng)用開發(fā)
人工智能開發(fā)
AI+Linux云計算運(yùn)維
Python+大數(shù)據(jù)開發(fā)
AI+設(shè)計
軟件測試
新媒體+短視頻
HTML&JS+前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:root選擇器用法-http://web.itheima.com</title>
<style>
:root {color: brown;}
h2 {color: goldenrod;}
</style>
<body>
<body>
<h2>《面朝大海春暖花開》</h2>
<p>從明天起做個幸福的人
喂馬劈柴周游世界
從明天起關(guān)心糧食和蔬菜
我有一所房子
面朝大海春暖花開</p>
</body>
</html>
如圖所示：
如果不指定h2元素的字體顏色，而僅僅使用“:root選擇器”設(shè)置的樣式，即刪除第8行代碼，效果如下圖所示。
如果對某個結(jié)構(gòu)元素使用樣式，但是想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個樣式，可以使用:not選擇器。下面通過一個案例來做具體演示，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not選擇器用法-http://web.itheima.com</title>
<style>
body *:not(h3) {
color: orange;
font-size: 20px;
font-family: "宋體";
}
</style>
<body>
<body>
<h3>《世界上最遠(yuǎn)的距離》</h3>
<p>世界上最遠(yuǎn)的距離</p>
<p>不是生與死的距離</p>
<p>而是我站在你面前</p>
<p>你卻不知道我愛你……</p>
</body>
</html>
在上面案例中，第7～10行代碼定義了頁面body的文本樣式，“body*:not(h3)”選擇器用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)元素h3，使其不應(yīng)用該文本樣式。
從圖中可以看出，只有h3標(biāo)記所定義的文字內(nèi)容沒有添加新的樣式。
:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說，如果某個父元素僅有一個子元素，則使用“:only-child選擇器”可以選擇這個子元素。
下面通過一個案例對“:only-child選擇器”的用法進(jìn)行演示，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:only-child選擇器用法-http://web.itheima.com</title>
<style>
li:only-child {color: red;}
</style>
<body>
<body>
<div>
國內(nèi)電影：
<ul>
<li>一代宗師</li>
<li>葉問</li>
<li>非誠勿擾</li>
</ul>
美國電影：
<ul>
<li>侏羅紀(jì)世界</li>
</ul>
日本動漫：
<ul>
<li>蠟筆小新</li>
<li>火影忍者</li>
<li>航海王</li>
</ul>
</body>
</html>
在上面案例中使用了:only-child選擇器“li:only-child”，用于選擇作為ul唯一子元素的li元素，并設(shè)置其文本顏色為紅色。
效果圖如下：
:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個或者最后一個子元素設(shè)置樣式。下面通過一個案例來演示它們的使用方法，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-child和last-child選擇器的使用-http://web.itheima.com</title>
<style>
p:first-child {
color: pink;
font-size: 16px;
font-family: "微軟雅黑";
}
p:last-child {
color: blue;
font-size: 16px;
font-family: "微軟雅黑";
}
</style>
<body>
<body>
<p>第一篇 畢業(yè)了</p>
<p>第二篇 關(guān)于考試</p>
<p>第三篇 夏日飛舞</p>
<p>第四篇 惆悵的心</p>
<p>第五篇 暢談美麗</p>
</body>
</html>
在上面案例中，分別使用了選擇器“p:first-child”和“p:last-child”，用于選擇作為其父元素的第1個子元素p和最后一個子元素p(本案例中的父元素為body)，然后為它們設(shè)置特殊的文本樣式。
頁面效果如下：
使用:first-child選擇器和:last-child選擇器可以選擇某個父元素中第一個或最后一個子元素，但是如果用戶想要選擇第2個或倒數(shù)第2個子元素，這兩個選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴(kuò)展。
如下案例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-child(n)和:nth-last-child(n)選擇器的使用-http://web.itheima.com</title>
<style>
p:nth-child(2){
color: pink;
font-size: 16px;
font-family: "宋體";
}
p:nth-last-child(2){
color: blue;
font-size: 16px;
font-family: "微軟雅黑";
}
</style>
<body>
<body>
<p>第一篇 畢業(yè)了</p>
<p>第二篇 關(guān)于考試</p>
<p>第三篇 夏日飛舞</p>
<p>第四篇 惆悵的心</p>
<p>第五篇 暢談美麗</p>
</body>
</html>
在上面案例中，分別使用了選擇器“p:nth-child(2)”和“p:nth-last-child(2)”，用于選擇作為其父元素的第2個子元素p和倒數(shù)第2個子元素p(本案例中的父元素為body)，然后為它們設(shè)置特殊的文本樣式。
頁面效果如下圖：
上面我們介紹了:nth-child(n)和:nth-last-child(n)選擇器，并實(shí)現(xiàn)了一些簡單的頁面效果，下面我們介紹:nth-of-type(n)和:nth-last-of-type(n)選擇器，這兩種選擇器的不同之處在于:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類型的第n個子元素和倒數(shù)第n個子元素，而:nth-child(n)和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個子元素和倒數(shù)第n個子元素，與元素類型無關(guān)。
下面就通過一個案例來對:nth-of-type(n)和:nth-last-of-type(n)選擇器做具體研究:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type(n)和nth-last-of-type(n)選擇器的使用-http://web.itheima.com</title>
<style>
h2:nth-of-type(odd){
color: #f09;
}
h2:nth-of-type(even){
color: #12ff65;
}
p:nth-last-of-type(2){
font-weight: bold;
}
</style>
<body>
<body>
<h2>網(wǎng)頁設(shè)計</h2>
<p>網(wǎng)頁設(shè)計是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。</p>
<h2>Java</h2>
<p>Java是一種可以撰寫跨平臺應(yīng)用程序的面向?qū)ο蟮某绦蛟O(shè)計語言。</p>
<h2>iOS</h2>
<p>iOS是由蘋果公司開發(fā)的移動操作系統(tǒng)。</p>
<h2>PHP</h2>
<p>PHP（外文名：PHP：Hypertext Preprocessor，中文名：“超文本預(yù)處理器”）是一種通用開源腳本語言。</p>
</body>
</html>
在上面案例中，第7行代碼“h2:nth-of-type(odd){color: #f09;}”用于將所有h2元素中第奇數(shù)行的字體顏色設(shè)置為玫紅色;第8行代碼“h2:nth-of-type(even){color：#12ff65;}”用于將所有h2元素中第偶數(shù)行的字體顏色設(shè)置為綠色;第9 行代碼“p:nth-last-of-type(2){font-weight: bold;}”用于將倒數(shù)第2個p元素的字體加粗顯示。
頁面效果圖如下：
從上圖中可以看出，所有奇數(shù)行文章標(biāo)題的字體顏色為玫紅色，所有偶數(shù)行文章標(biāo)題的字體顏色為綠色，倒數(shù)第二個p元素定義的字體樣式為粗體顯示，實(shí)現(xiàn)了最終想要的結(jié)果。
:empty選擇器用來選擇沒有子元素或文本內(nèi)容為空的所有元素。下面通過一個案例對“:empty選擇器”的用法進(jìn)行演示，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty選擇器的使用-http://web.itheima.com</title>
<style>
p {
width: 150px;
height: 30px;
}
:empty {
background-color: #999;
}
</style>
<body>
<body>
<p>傳智播客北京校區(qū)</p>
<p>傳智播客上海校區(qū)</p>
<p>傳智播客廣州校區(qū)</p>
<p></p>
<p>傳智播客武漢校區(qū)</p>
</body>
</html>
在上面案例中，第18行代碼用于定義空元素p，第11行代碼使用“:empty選擇器”將頁面中空元素的背景顏色設(shè)置為灰色。
從圖中可以看出，沒有內(nèi)容的p元素被添加了灰色背景色。
:target選擇器用于為頁面中的某個target元素(該元素的id被當(dāng)做頁面中的超鏈接來使用)指定樣式。只有用戶單擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后，:target選擇器所設(shè)置的樣式才會起作用。
下面通過一個案例對“:target選擇器”的用法進(jìn)行演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target選擇器的使用-http://web.itheima.com</title>
<style>
:target{background-color: #e5eecc;}
</style>
<body>
<body>
<h1>這是標(biāo)題</h1>
<p><a href="#news1">跳轉(zhuǎn)至內(nèi)容 1</a></p>
<p><a href="#news2">跳轉(zhuǎn)至內(nèi)容 2</a></p>
<p>請單擊上面的鏈接，:target 選擇器會突出顯示當(dāng)前活動的HTML錨。</p>
<p id="news1"><b>內(nèi)容 1...</b></p>
<p id="news2"><b>內(nèi)容 2...</b></p>
</body>
</html>
在例案例中，第7行代碼用于為target元素指定背景顏色。當(dāng)單擊鏈接時，所鏈接到的內(nèi)容將會被添加背景顏色效果。效果如下所示。
當(dāng)單擊“跳轉(zhuǎn)至內(nèi)容1”時，效果如下圖所示，鏈接內(nèi)容添加了背景顏色效果。
猜你喜歡：
科列表頁面右側(cè)廣告圖.jpg)
科列表頁面右側(cè)廣告圖230x148.jpg)
據(jù)學(xué)科列表頁右側(cè).png)
科列表頁面右側(cè)廣告圖.jpg)
.jpg)