target偽類選擇器指的是什么

發(fā)布時(shí)間：2020-09-26 13:41:44 來(lái)源：億速云閱讀：157 作者：小新欄目：web開發(fā)

小編給大家分享一下target偽類選擇器指的是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

target選擇器簡(jiǎn)介

:target選擇器用于選取頁(yè)面中的某個(gè)target元素。那什么是target元素呢？target元素，說(shuō)白了就是該元素的id被當(dāng)做頁(yè)面的超鏈接來(lái)使用。很難理解？還是上個(gè)菜給大家品嘗一下先吧。

舉例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target選擇器</title>
    <style type="text/css">
        :target h4
        {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#music">推薦音樂</a><br />
        <a href="#movie">推薦電影</a><br />
        <a href="#article">推薦文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h4>推薦音樂</h4>
        <ul>
            <li>林俊杰-被風(fēng)吹過(guò)的下圖</li>
            <li>曲婉婷-在我的歌聲里</li>
            <li>許嵩-灰色頭像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h4>推薦電影</h4>
        <ul>
            <li>蜘蛛俠系列</li>
            <li>鋼鐵俠系統(tǒng)</li>
            <li>復(fù)仇者聯(lián)盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h4>推薦文章</h4>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-鄉(xiāng)愁</li>
            <li>魯迅-阿Q正傳</li>
        </ul>
    </div>
</body>
</html>

效果如下：

target偽類選擇器指的是什么

分析：

當(dāng)點(diǎn)擊錨點(diǎn)鏈接時(shí)，相應(yīng)的target元素下的h4標(biāo)簽字體顏色就會(huì)變?yōu)榧t色。

:target選擇器一般都是結(jié)合錨點(diǎn)鏈接來(lái)使用，更好地給讀者進(jìn)行導(dǎo)航效果，這也是對(duì)用戶體驗(yàn)非常好的一個(gè)做法。

看完了這篇文章，相信你對(duì)target偽類選擇器指的是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

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

target偽類選擇器指的是什么

猜你喜歡

最新資訊

相關(guān)推薦

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