CSS3特性:CSS3 target偽類
CSS3 target偽類是眾多實用的CSS3特性中的一個。它用來匹配文檔(頁面)的URI中某個標志符的目標元素。具體來說,URI中的標志符通常會包含一個”#”字符,然后后面帶有一個標志符名稱,比如#respond,target就是用來匹配ID為respond的元素的。
現在在頁面中,點擊一個ID鏈接后,頁面只會跳轉到相應的位置,但是并不會有比較明顯的UI標識,使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。
瀏覽器支持
因為我們在討論CSS3,所以它現在被除了IE6-8以外的所有瀏覽器支持,但是IE9會支持這個偽類。這是相當遺憾的,但是這個現實并不影響你使用它。
如何使用:target
:target偽類和:hover、:link、:visited、:focus等偽類的用法是一樣的:
1 2 3 4
selector:target{ color:red; /*other styles*/ }
實例
讓我們通過一個簡單的例子來演示。比如我們在頁面中常常會用到tab,之前我們要用腳本來實現,YUI、jQuery也都有這樣的插件或者模塊,但是現在我們用:target偽類就可以實現。
HTML結構:
1 2 3 4 5 6 7 8 9 10 11
<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代碼:
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內容框設置為絕對定位,然后通過:target偽類調整其z-index。
這里是個demo頁面。
具體用法就是這么簡單,在實際項目中大家就可以隨意發揮了 :)
擴展閱讀 https://developer.mozilla.org/en/CSS/:target http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class http://css-tricks.com/css3-tabs/
Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |
留言列表