|
CSS3 target偽類是眾多實(shí)用的CSS3特性中的一個(gè)。它用來(lái)匹配文檔(頁(yè)面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素。具體來(lái)說(shuō)，URI中的標(biāo)志符通常會(huì)包含一個(gè)”#”字符，然后后面帶有一個(gè)標(biāo)志符名稱，比如#respond，target就是用來(lái)匹配ID為respond的元素的。
現(xiàn)在在頁(yè)面中，點(diǎn)擊一個(gè)ID鏈接后，頁(yè)面只會(huì)跳轉(zhuǎn)到相應(yīng)的位置，但是并不會(huì)有比較明顯的UI標(biāo)識(shí)，使用:target偽類可以像:hover等偽類一樣對(duì)目標(biāo)元素定義樣式。
瀏覽器支持
因?yàn)槲覀冊(cè)谟懻揅SS3，所以它現(xiàn)在被除了IE6-8以外的所有瀏覽器支持，但是IE9會(huì)支持這個(gè)偽類。這是相當(dāng)遺憾的，但是這個(gè)現(xiàn)實(shí)并不影響你使用它。
如何使用:target
:target偽類和:hover、:link、:visited、:focus等偽類的用法是一樣的：
selector:target{
color:red;
/*other styles*/
}
實(shí)例
讓我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)演示。比如我們?cè)陧?yè)面中常常會(huì)用到tab，之前我們要用腳本來(lái)實(shí)現(xiàn)，YUI、jQuery也都有這樣的插件或者模塊，但是現(xiàn)在我們用:target偽類就可以實(shí)現(xiàn)。
HTML結(jié)構(gòu)：
<ul class="tabs">
<li><a href="#tab1">標(biāo)簽一</a></li>
<li><a href="#tab2">標(biāo)簽二</a></li>
<li><a href="#tab3">標(biāo)簽三</a></li>
</ul>
<div id="tab1" class="tab_content">
<!--tabed content--></div>
<div id="tab2" class="tab_content">
<!--tabed content--></div>
<div id="tab3" class="tab_content">
<!--tabed content--></div>
CSS3代碼：
/*layout styles*/
.tab_content {
position: absolute;/*set content box as absolute*/
/*other layout styles*/
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
原理想必大家都看懂了，就是將tab內(nèi)容框設(shè)置為絕對(duì)定位，然后通過(guò):target偽類調(diào)整其z-index。
這里是個(gè)demo頁(yè)面。
具體用法就是這么簡(jiǎn)單，在實(shí)際項(xiàng)目中大家就可以隨意發(fā)揮了 :)
擴(kuò)展閱讀
原文：http://css9.net/t/142/snap/
本文鏈接：http://www.95time.cn/tech/web/2011/8298.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
