CSS3 target偽類是眾多實用的CSS3特性中的一個。它用來匹配文檔(頁面)的URI中某個標志符的目標元素。具體來說，URI中的標志符通常會包含一個”#”字符，然后后面帶有一個標志符名稱，比如#respond，target就是用來匹配ID為respond的元素的。

現在在頁面中，點擊一個ID鏈接后，頁面只會跳轉到相應的位置，但是并不會有比較明顯的UI標識，使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。

瀏覽器支持

因為我們在討論CSS3，所以它現在被除了IE6-8以外的所有瀏覽器支持，但是IE9會支持IC交易網這個偽類。這是相當遺憾的，但是這個現實并不影響你使用它。

如何使用:target

:target偽類和:hover、:link、:visited、:focus等偽類的用法是一樣的：

?selector:target{
color:red;
/*other styles*/
}

實例

讓我們通過一個簡單的例子來演示。比如我們在頁面中常常會用到tab，之前我們要用腳本來實現IC交易網，YUI、jQuery也都有這樣的插件或者模塊，但是現在我們用:target偽類就可以實現。

HTML結構：

?<ul class="tabs">
?<li><a href="#tab1">標簽一</a></li>
?<li><a href="#tab2">標簽二</a></li>
?<li><a href="#tab3">標簽三</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內容框設置為絕對定位，然后通過:target偽類調整其z-index。

這里是個demo頁面。

具體用法就是這么簡單，在實際項目中大家就可以隨意發揮了 :)

轉載于:https://www.cnblogs.com/codeaspnet/archive/2011/06/30/2095017.html

總結

以上是生活随笔為你收集整理的记录CSS3 target伪类简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。