一、怎么使用CSS3:target選擇器

target是CSS3偽類選擇器中的一種，用來匹配文本中某個標志符的目標元素。＃ 錨的名稱是在一個文件中鏈接到元素的url，元素被鏈接到目標元素。:target選擇器可用于當前激活的target元素的樣式。

具體來說，url中一般會包含一個#，后面帶一個名稱，如#aa,:target就是匹配id為"aa"的目標元素。舉個例子：如一個頁面中有一個a標簽，它的href如下：<a href="#box">按鈕3</a> ，同一個頁面中也會有以box為id的元素，<div id="box">相關內容3</div>
那么a標簽的href屬性會鏈接到#box中，也就是box:target選擇符所選的目標元素，它所指定的樣式就是當a鏈接到這個元素時候，目標元素的樣式。比如你如果想改變鏈接指向#tab的元素字體大小，你可以這樣設置：#tab:target {font-size:30px}。

二、CSS3:target實例

就單純用CSS實現，點擊標題1，跳轉到content 1，點擊標題,2，跳轉到content 2的效果。

HTML部分：

<p><a href="#news1">標題1</a></p>
  <p><a href="#news2">標題2</a></p>
  <p><a href="#news3">標題3</a></p>    
  <p id="news1"><b>content 1</b></p>
  <p id="news2"><b>content 2</b></p>
  <p id="news3"><b>content 3</b></p>

CSS部分：

:target
  {
   border: 2px solid #D4D4D4;
   background-color: #e5eecc;
   font-size:25px;
  }

圖片效果：

以上效果類似于tab的切換效果，你可以在:target偽類中設置你想要的效果，他的用法實際上與:hover、:link、:visited等偽類的用法一樣。在這個案例中，當你點擊標題2時，內容content 2會被激活，顯示背景且字體變大，看看效果吧。

總結：CSS target目標id所指向的元素，也就是使用了(href=“#xxx”)屬性的元素，一定要用a鏈接，否則沒有效果。以上主要介紹了CSS3的一個冷門知識，最后還用target做一個類似tab的切換效果，希望可以幫助到你!

以上就是你不知道的CSS3目標偽類選擇器target（代碼實例解析）的詳細內容，更多請關注php中文網其它相關文章！