CSS3 target 選擇器_:target偽類的使用


target作為目標偽類選擇器,是css3中的新特性之一,目前已經支持所有主流瀏覽器,除了 IE8 及更早的版本。target偽類的主要是用於匹配文檔中uri中某個標志符的目標元素,具體來說,uri中的標志通常會包含一個#,后面帶有一個標志符名稱,如#box_one,:target就是匹配ID為"box_one"的目標元素。

 

舉個簡單的例子:

如一個頁面中有一個a標簽,它的href如下:<a href="#box-three">Tab 3</a> ,同一個頁面中也會有以box-three為id的元素,<div id="box-three">tab3 content</div>

那么a標簽的href屬性會鏈接到#box-three元素,也就是box-three:target選擇符所選的目標元素,它所指定的樣式就是當a鏈接到這個元素時候,目標元素的樣式。

 

注意:

目標偽類選擇器是一個動態選擇器,只有存在url指向該匹配元素時候,樣式才會生效。

 1 <style>
 2 :target {
 3     border: 2px solid #D4D4D4;background-color: #e5eecc;
 4 }
 5 </style>
 6 <p>
 7     <a href="#news1">跳轉至內容 1</a>
 8 </p>
 9 <p>
10     <a href="#news2">跳轉至內容 2</a>
11 </p>
12 <p>請點擊上面的鏈接,:target 選擇器會突出顯示當前活動的 HTML 錨。</p>
13 <p id="news1"><b>內容 1...</b></p>
14 <p id="news2"><b>內容 2...</b></p>
15 <p><b>注釋:</b> Internet Explorer 8 以及更早的版本不支持 :target 選擇器。</p>

熊貓辦公https://www.wode007.com/sites/73654.html

效果如下:

總結

target 選擇器會突出顯示當前活動的 HTML 錨。URL 帶有后面跟有錨名稱 #,指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。:target 選擇器可用於選取當前活動的目標元素。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM