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