怎么使用CSS3:target選擇器？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)主營肥城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),肥城h5微信小程序搭建,肥城網(wǎng)站營銷推廣歡迎肥城等地區(qū)企業(yè)咨詢

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

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

具體來說，url中一般會包含一個(gè)#，后面帶一個(gè)名稱，如#aa,:target就是匹配id為"aa"的目標(biāo)元素。舉個(gè)例子：如一個(gè)頁面中有一個(gè)a標(biāo)簽，它的href如下：按鈕3 ，同一個(gè)頁面中也會有以box為id的元素，

那么a標(biāo)簽的href屬性會鏈接到#box中，也就是box:target選擇符所選的目標(biāo)元素，它所指定的樣式就是當(dāng)a鏈接到這個(gè)元素時(shí)候，目標(biāo)元素的樣式。比如你如果想改變鏈接指向#tab的元素字體大小，你可以這樣設(shè)置：#tab:target {font-size:30px}。

二、CSS3:target實(shí)例

就單純用CSS實(shí)現(xiàn)，點(diǎn)擊標(biāo)題1，跳轉(zhuǎn)到content 1，點(diǎn)擊標(biāo)題,2，跳轉(zhuǎn)到content 2的效果。

HTML部分：

標(biāo)題1
  
標(biāo)題2
  
標(biāo)題3
    
  
content 1
  
content 2
  
content 3

CSS部分：

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

圖片效果：

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

感謝各位的閱讀！看完上述內(nèi)容，你們對怎么使用CSS3:target選擇器大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

標(biāo)題名稱：怎么使用CSS3:target選擇器-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/hoeps.html