css中target的用法

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

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

css :target選擇器

URL 帶有后面跟有錨名稱 #，指向文檔內(nèi)某個(gè)具體的元素。這個(gè)被鏈接的元素就是目標(biāo)元素(target element)。

:target 選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。

CSS3 :target偽類用來改變頁(yè)面中錨鏈接URL所指向的ID元素的樣式。【相關(guān)推薦：css在線手冊(cè)】

例如你要改變描鏈接指向#tab的元素字體顏色為藍(lán)色，哪么你可以這樣寫成：

#tab:target {color:blue}

瀏覽器支持：

不支持IE8及以下的IE版本，IE9支持這個(gè)屬性，其它非IE內(nèi)核瀏覽器如：Firefox、Chrome、等這些瀏覽器都支持。

用法：

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

:target {color:blue}

實(shí)例：CSS3 :target偽類實(shí)現(xiàn)Tab切換效果

下面簡(jiǎn)單介紹下如何用csse :target來制作一個(gè)無(wú)JavaScript的tab切換效果

HTML代碼：

<div class="tablist">
<ul class="tabmenu">
<li>
<a href="#tab1">標(biāo)簽一</a>
</li>
<li>
<a href="#tab2">標(biāo)簽二</a>
</li>
<li>
<a href="#tab3">標(biāo)簽三</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;
}

原理其實(shí)很簡(jiǎn)單，就是把tab元素設(shè)為絕對(duì)對(duì)定位absolute,再通過:target偽類改變它們的層級(jí)（z-index）。

以上是“css中target的用法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！