css3結(jié)構(gòu)偽類(lèi)選擇器詳細(xì)介紹

更新時(shí)間:2021-09-23 來(lái)源:黑馬程序員瀏覽量:

結(jié)構(gòu)化偽類(lèi)選擇器是CSS3中新增加的選擇器。常用的結(jié)構(gòu)化偽類(lèi)選擇器有：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選擇器

:root選擇器用于匹配文檔根元素，在HTML中，根元素始終是html元素。也就是說(shuō)使用“:root選擇器”定義的樣式，對(duì)所有頁(yè)面元素都生效。對(duì)于不需要該樣式的元素，可以單獨(dú)設(shè)置樣式進(jìn)行覆蓋。

下面通過(guò)一個(gè)案例對(duì):root選擇器的用法進(jìn)行演示，如下示。

<!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>《面朝大海春暖花開(kāi)》</h2>
    <p>從明天起做個(gè)幸福的人
    喂馬劈柴周游世界
    從明天起關(guān)心糧食和蔬菜
    我有一所房子
    面朝大海春暖花開(kāi)</p>
</body>
</html>

如圖所示：

root選擇器1

如果不指定h2元素的字體顏色，而僅僅使用“:root選擇器”設(shè)置的樣式，即刪除第8行代碼，效果如下圖所示。

root選擇器2

:not選擇器

如果對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個(gè)樣式，可以使用:not選擇器。下面通過(guò)一個(gè)案例來(lái)做具體演示，如下所示。

<!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>你卻不知道我愛(ài)你……</p>
</body>
</html>

在上面案例中，第7～10行代碼定義了頁(yè)面body的文本樣式，“body*:not(h3)”選擇器用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)元素h3，使其不應(yīng)用該文本樣式。

not選擇器

從圖中可以看出，只有h3標(biāo)記所定義的文字內(nèi)容沒(méi)有添加新的樣式。

:only-child選擇器

:only-child選擇器用于匹配屬于某父元素的唯一子元素的元素，也就是說(shuō)，如果某個(gè)父元素僅有一個(gè)子元素，則使用“:only-child選擇器”可以選擇這個(gè)子元素。

下面通過(guò)一個(gè)案例對(duì)“: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>
        國(guó)內(nèi)電影：
　      <ul>
　　        <li>一代宗師</li>
　　        <li>葉問(wèn)</li>
　　        <li>非誠(chéng)勿擾</li>
　      </ul>
        美國(guó)電影：
　      <ul>
　　        <li>侏羅紀(jì)世界</li>
　      </ul>
        日本動(dòng)漫：
　      <ul>
　　        <li>蠟筆小新</li>
　　        <li>火影忍者</li>
　　        <li>航海王</li>
　      </ul>
</body>
</html>

在上面案例中使用了:only-child選擇器“li:only-child”，用于選擇作為ul唯一子元素的li元素，并設(shè)置其文本顏色為紅色。

效果圖如下：

:first-child和:last-child選擇器

:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)或者最后一個(gè)子元素設(shè)置樣式。下面通過(guò)一個(gè)案例來(lái)演示它們的使用方法，如下所示。

<!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個(gè)子元素p和最后一個(gè)子元素p(本案例中的父元素為body)，然后為它們?cè)O(shè)置特殊的文本樣式。

頁(yè)面效果如下：

first-child

:nth-child(n)和:nth-last-child(n)選擇器

使用:first-child選擇器和:last-child選擇器可以選擇某個(gè)父元素中第一個(gè)或最后一個(gè)子元素，但是如果用戶(hù)想要選擇第2個(gè)或倒數(shù)第2個(gè)子元素，這兩個(gè)選擇器就不起作用了。為此，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個(gè)子元素p和倒數(shù)第2個(gè)子元素p(本案例中的父元素為body)，然后為它們?cè)O(shè)置特殊的文本樣式。

頁(yè)面效果如下圖：

:nth-of-type(n)和:nth-last-of-type(n)選擇器

上面我們介紹了:nth-child(n)和:nth-last-child(n)選擇器，并實(shí)現(xiàn)了一些簡(jiǎn)單的頁(yè)面效果，下面我們介紹:nth-of-type(n)和:nth-last-of-type(n)選擇器，這兩種選擇器的不同之處在于:nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類(lèi)型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，而:nth-child(n)和:nth-last-child(n)選擇器用于匹配屬于父元素的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，與元素類(lèi)型無(wú)關(guān)。

下面就通過(guò)一個(gè)案例來(lái)對(duì):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)頁(yè)設(shè)計(jì)</h2>
    <p>網(wǎng)頁(yè)設(shè)計(jì)是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。</p>
    <h2>Java</h2>
    <p>Java是一種可以撰寫(xiě)跨平臺(tái)應(yīng)用程序的面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言。</p>
    <h2>iOS</h2>
    <p>iOS是由蘋(píng)果公司開(kāi)發(fā)的移動(dòng)操作系統(tǒng)。</p>
    <h2>PHP</h2>
    <p>PHP（外文名：PHP：Hypertext Preprocessor，中文名：“超文本預(yù)處理器”）是一種通用開(kāi)源腳本語(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個(gè)p元素的字體加粗顯示。

頁(yè)面效果圖如下：

nth-of-type(n)和nth-last-of-type(n)選擇器

從上圖中可以看出，所有奇數(shù)行文章標(biāo)題的字體顏色為玫紅色，所有偶數(shù)行文章標(biāo)題的字體顏色為綠色，倒數(shù)第二個(gè)p元素定義的字體樣式為粗體顯示，實(shí)現(xiàn)了最終想要的結(jié)果。

:empty選擇器

:empty選擇器用來(lái)選擇沒(méi)有子元素或文本內(nèi)容為空的所有元素。下面通過(guò)一個(gè)案例對(duì)“: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選擇器”將頁(yè)面中空元素的背景顏色設(shè)置為灰色。

empty選擇器

從圖中可以看出，沒(méi)有內(nèi)容的p元素被添加了灰色背景色。

:target選擇器

:target選擇器用于為頁(yè)面中的某個(gè)target元素(該元素的id被當(dāng)做頁(yè)面中的超鏈接來(lái)使用)指定樣式。只有用戶(hù)單擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后，:target選擇器所設(shè)置的樣式才會(huì)起作用。

下面通過(guò)一個(gè)案例對(duì)“: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>請(qǐng)單擊上面的鏈接，:target 選擇器會(huì)突出顯示當(dāng)前活動(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)單擊鏈接時(shí)，所鏈接到的內(nèi)容將會(huì)被添加背景顏色效果。效果如下所示。

target選擇器1