首頁技術文章正文

css3結構偽類選擇器詳細介紹

更新時間:2021-09-23 來源:黑馬程序員 瀏覽量:

結構化偽類選擇器是CSS3中新增加的選擇器。常用的結構化偽類選擇器有：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元素。也就是說使用“:root選擇器”定義的樣式，對所有頁面元素都生效。對于不需要該樣式的元素，可以單獨設置樣式進行覆蓋。

下面通過一個案例對:root選擇器的用法進行演示，如下示。

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

如圖所示：

root選擇器1

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

root選擇器2


:not選擇器

如果對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，可以使用: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>《世界上最遠的距離》</h3>
    <p>世界上最遠的距離</p>
    <p>不是生與死的距離</p>
    <p>而是我站在你面前</p>
    <p>你卻不知道我愛你……</p>
</body>
</html>

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

not選擇器

從圖中可以看出，只有h3標記所定義的文字內容沒有添加新的樣式。


:only-child選擇器

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

下面通過一個案例對“:only-child選擇器”的用法進行演示，如下所示。

<!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>
        國內電影：
　      <ul>
　　        <li>一代宗師</li>
　　        <li>葉問</li>
　　        <li>非誠勿擾</li>
　      </ul>
        美國電影：
　      <ul>
　　        <li>侏羅紀世界</li>
　      </ul>
        日本動漫：
　      <ul>
　　        <li>蠟筆小新</li>
　　        <li>火影忍者</li>
　　        <li>航海王</li>
　      </ul>
</body>
</html>

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

效果圖如下：

only-child

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

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

<!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>第二篇 關于考試</p>
    <p>第三篇 夏日飛舞</p>
    <p>第四篇 惆悵的心</p>
    <p>第五篇 暢談美麗</p>
</body>
</html>

在上面案例中，分別使用了選擇器“p:first-child”和“p:last-child”，用于選擇作為其父元素的第1個子元素p和最后一個子元素p(本案例中的父元素為body)，然后為它們設置特殊的文本樣式。

頁面效果如下：

first-child


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

使用:first-child選擇器和:last-child選擇器可以選擇某個父元素中第一個或最后一個子元素，但是如果用戶想要選擇第2個或倒數(shù)第2個子元素，這兩個選擇器就不起作用了。為此，CSS3引入了:nth-child(n)和:nth-last-child(n)選擇器，它們是:first-child選擇器和:last-child選擇器的擴展。

如下案例所示：


<!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>第二篇 關于考試</p>
    <p>第三篇 夏日飛舞</p>
    <p>第四篇 惆悵的心</p>
    <p>第五篇 暢談美麗</p>
</body>
</html>

在上面案例中，分別使用了選擇器“p:nth-child(2)”和“p:nth-last-child(2)”，用于選擇作為其父元素的第2個子元素p和倒數(shù)第2個子元素p(本案例中的父元素為body)，然后為它們設置特殊的文本樣式。

頁面效果如下圖：

first-child選擇器

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

上面我們介紹了:nth-child(n)和:nth-last-child(n)選擇器，并實現(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個子元素，與元素類型無關。

下面就通過一個案例來對: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)頁設計</h2>
    <p>網(wǎng)頁設計是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務、理念、文化），進行網(wǎng)站功能策劃，然后進行的頁面設計美化工作。</p>
    <h2>Java</h2>
    <p>Java是一種可以撰寫跨平臺應用程序的面向對象的程序設計語言。</p>
    <h2>iOS</h2>
    <p>iOS是由蘋果公司開發(fā)的移動操作系統(tǒng)。</p>
    <h2>PHP</h2>
    <p>PHP（外文名：PHP：Hypertext Preprocessor，中文名：“超文本預處理器”）是一種通用開源腳本語言。</p>
</body>
</html>

在上面案例中，第7行代碼“h2:nth-of-type(odd){color: #f09;}”用于將所有h2元素中第奇數(shù)行的字體顏色設置為玫紅色;第8行代碼“h2:nth-of-type(even){color：#12ff65;}”用于將所有h2元素中第偶數(shù)行的字體顏色設置為綠色;第9 行代碼“p:nth-last-of-type(2){font-weight: bold;}”用于將倒數(shù)第2個p元素的字體加粗顯示。

頁面效果圖如下：

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

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


:empty選擇器

:empty選擇器用來選擇沒有子元素或文本內容為空的所有元素。下面通過一個案例對“:empty選擇器”的用法進行演示，如下所示。

<!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選擇器”將頁面中空元素的背景顏色設置為灰色。

empty選擇器

從圖中可以看出，沒有內容的p元素被添加了灰色背景色。


:target選擇器

:target選擇器用于為頁面中的某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式。只有用戶單擊了頁面中的超鏈接，并且跳轉到target元素后，:target選擇器所設置的樣式才會起作用。

下面通過一個案例對“:target選擇器”的用法進行演示。

<!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>這是標題</h1>
    <p><a href="#news1">跳轉至內容 1</a></p>
    <p><a href="#news2">跳轉至內容 2</a></p>
    <p>請單擊上面的鏈接，:target 選擇器會突出顯示當前活動的HTML錨。</p>
    <p id="news1"><b>內容 1...</b></p>
    <p id="news2"><b>內容 2...</b></p>
</body>
</html>

在例案例中，第7行代碼用于為target元素指定背景顏色。當單擊鏈接時，所鏈接到的內容將會被添加背景顏色效果。效果如下所示。

target選擇器1

當單擊“跳轉至內容1”時，效果如下圖所示，鏈接內容添加了背景顏色效果。

target選擇器2



猜你喜歡：

CSS怎樣更換鼠標樣式？

圓角矩形css怎么寫？

清除input默認樣式

CSS中px、em、rem有什么區(qū)別和不同？

黑馬程序員HTML&JS+前端高手班

分享到：
在線咨詢 我要報名
和我們在線交談！