css target怎麼用

css target是指“:target”選擇器，可用於選取目前活動的目標元素，其使用語法如“#tab:target {color:blue}”，該語句表示改變錨定連結指向“ #tab」的元素字體顏色為藍色。

本教學操作環境：windows7系統、css3版、thinkpad t480電腦。

推薦：《css影片教學》

css :target選擇器

URL 有後面跟有錨名稱#，指向文件內某個特定的元素。這個被連結的元素就是目標元素(target element)。

:target 選擇器可用來選取目前活動的目標元素。

CSS3 :target偽類別用來改變頁面中錨連結URL所指向的ID元素的樣式。 【相關推薦：css線上手冊】

例如你要改變描連結指向#tab的元素字體顏色為藍色，哪麼你可以這樣寫成：

#tab:target {color:blue}

瀏覽器支援：

不支援IE8及以下的IE版本，IE9支援這個屬性，其它非IE核心瀏覽器如：Firefox、Chrome、等這些瀏覽器都支援。

用法：

:target偽類別與:hover、:link、:visited、:focus等偽類別的用法一樣

:target {color:blue}

實例：CSS3 :target偽類實作Tab切換效果

下面簡單介紹下如何用csse :target來製作一個無JavaScript的tab切換效果

HTML程式碼：

<div class="tablist">
<ul class="tabmenu">
<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">tab1 content</div>
<div id="tab2" class="tab_content">tab2 content</div>
<div id="tab3" class="tab_content">tab3 content</div>
</div>

CSS程式碼：

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

原理其實很簡單，就是把tab元素設為絕對對定位absolute,再通過:target偽類改變它們的層級（z-index）。

以上是css target怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！