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