css中target的用法

小編給大家分享一下css中target的用法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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的用法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！