CSS3 target偽類簡介

css3 target偽類是眾多實用的css3特性中的乙個。它用來匹配文件(頁面)的uri中某個標誌符的目標元素。具體來說，uri中的標誌符通常會包含乙個」#」字元，然後後面帶有乙個標誌符名稱，比如#respond，target就是用來匹配id為respond的元素的。

現在在頁面中，點選乙個id鏈結後，頁面只會跳轉到相應的位置，但是並不會有比較明顯的ui標識，使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。

因為我們在討論css3，所以它現在被除了ie6-8以外的所有瀏覽器支援，但是ie9會支援這個偽類。這是相當遺憾的，但是這個現實並不影響你使用它。

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

123

4

selector:target

讓我們通過乙個簡單的例子來演示。比如我們在頁面中常常會用到tab，之前我們要用指令碼來實現，yui、jquery也都有這樣的外掛程式或者模組，但是現在我們用:target偽類就可以實現。

html結構：

123

4567
891011

class

="tabs">
href
="#tab1">標籤一a>li>
href
="#tab2">標籤二a>li>
href
="#tab3">標籤三a>li>
ul>
"tab1"
class
="tab_content">
div>
"tab2"
class
="tab_content">
div>
"tab3"
class
="tab_content">
div>

css3**：

123

4567
8

/*layout styles*/

.tab_content
#tab1
:target
,#tab2
:target
,#tab3
:target 

原理想必大家都看懂了，就是將tab內容框設定為絕對定位，然後通過:target偽類調整其z-index。

這裡是個demo頁面。

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

按鈕要匹配的id：target

就是這種用法- -css樣式隨便改 就能做出各種動畫效果

關於偽類 target

什麼是target偽類？先看一下解釋 url後面跟錨點 指向文件內某個具體的元素。這個被鏈結的元素就是目標元素 target element target選擇器用於選取當前活動的目標元素。舉個例子 html a href target 點我 a div id target div html 正常情況...

css3結構性偽類選擇器 target

target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。html content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素的url中的標誌符通常會包含乙個 號，後面帶有乙個標...

CSS3 結構性偽類選擇器 target

target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。示例展示 點選鏈結顯示隱藏的段落。html id brand content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素...