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 選擇器可用於選取當前活動的目標元素。