CSS3特性：CSS3 target偽類(lèi)

2020-03-24 16:34:03

字體：大中小

供稿：網(wǎng)友

CSS3 target偽類(lèi)是眾多實(shí)用的CSS3特性中的一個(gè)。它用來(lái)匹配文檔(頁(yè)面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素。具體來(lái)說(shuō)，URI中的標(biāo)志符通常會(huì)包含一個(gè)”#”字符，然后后面帶有一個(gè)標(biāo)志符名稱(chēng)，比如#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偽類(lèi)可以像:hover等偽類(lèi)一樣對(duì)目標(biāo)元素定義樣式。瀏覽器支持
因?yàn)槲覀冊(cè)谟懻揅SS3，所以它現(xiàn)在被除了IE6-8以外的所有瀏覽器支持，但是IE9會(huì)支持這個(gè)偽類(lèi)。這是相當(dāng)遺憾的，但是這個(gè)現(xiàn)實(shí)并不影響你使用它。如何使用:target
:target偽類(lèi)和:hover、:link、:visited、:focus等偽類(lèi)的用法是一樣的：1
2
3
4selector: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偽類(lèi)就可以實(shí)現(xiàn)。HTML結(jié)構(gòu)：
1
2
3
4
5
6
7
8
9
10
11 ul
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"
/div
div id="tab2"
/div
div id="tab3"
/div
CSS3代碼：
1
2
3
4
5
6
7
8/*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偽類(lèi)調(diào)整其z-index。這里是個(gè)demo頁(yè)面。具體用法就是這么簡(jiǎn)單，在實(shí)際項(xiàng)目中大家就可以隨意發(fā)揮了 :)擴(kuò)展閱讀
http://developer.mozilla.org/en/CSS/:target
http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-html' target='_blank'>class
http://css-tricks.com/css3-tabs/html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS入門(mén)教程

下一篇：在CSS中關(guān)于字體處理效果的思考