CSS3---結構性僞類選擇器—target

結構性僞類選擇器—target

:target選擇器稱爲目標選擇器，用來匹配文檔(頁面)的url的某個標誌符的目標元素。咱們先來上個例子，而後再作分析。

示例展現

點擊連接顯示隱藏的段落。

HTML代碼：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>

CSS代碼：

.menuSection{
  display: none;
}
:target{/*這裏的:target就是指id="brand"的div對象*/
  display:block;
}

演示結果：

分析：

一、具體來講，觸發元素的URL中的標誌符一般會包含一個#號，後面帶有一個標誌符名稱，上面代碼中是：#brand

二、：target就是用來匹配id爲「brand」的元素（id="brand"的元素）,上面代碼中是那個div元素。

多個url（多個target）處理：

就像上面的例子，#brand與後面的id="brand"是對應的，當同一個頁面上有不少的url的時候你能夠取不一樣的名字，只要#號後對的名稱與id=""中的名稱對應就能夠了。
以下面例子：
html代碼：  

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div> 

css代碼：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }