DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 3.7 :target選擇器
3.7 :target選擇器
編輯:CSS3基礎     

一、: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元素下的h3標簽字體顏色就會變為紅色。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved