首頁 > web前端 > css教學 > target偽類別選擇器是什麼? css:target選擇器怎麼用

target偽類別選擇器是什麼? css:target選擇器怎麼用

云罗郡主
發布: 2018-11-19 10:48:47
轉載
4217 人瀏覽過

這篇文章帶給大家的內容是關於target偽類選擇器是什麼? css:target選擇器怎麼用,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

target選擇器簡介

:target選擇器用於選取頁面中的某個target元素。那什麼是target元素呢? target元素,說白了就是該元素的id被當作頁面的超連結來使用。很難理解?還是上個菜給大家品嚐一下先吧。

範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target选择器</title>
    <style type="text/css">
        :target h3
        {
            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">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>
登入後複製

效果如下:

target偽類別選擇器是什麼? css:target選擇器怎麼用

#分析:

當點擊錨點連結時,對應的target元素下的h3標籤字體顏色就會變成紅色。

:target選擇器一般都是結合錨點連結來使用,更好地給讀者進行導航效果,這也是對使用者體驗非常好的一個做法。

以上就是對target偽類別選擇器是什麼? css:target選擇器怎麼用的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。


以上是target偽類別選擇器是什麼? css:target選擇器怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:lvyestudy.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板