結構性偽類選擇器—target
:target選擇器稱爲目標選擇器
用來匹配文档(頁面)的url的某個標志符的目標元素。我們先來上個例子，然後再做分析。
示例展示：點擊鏈接顯示隱藏的段落。
HTML代碼：
<h2><a href="#brand">Brand</a></h2> <div 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 id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div 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;
}上面的代碼可以對不同的target對象分別設置不的樣式。
index.html代碼：
<!DOCTPE HTML> <html> <head> <meta chrset="utf-8"> <title>結構性偽類選擇器——target</title> <link href="style.css" ref="stylesheet" type="text/css"> </head> <body> <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> </body> </html>
style.css代碼：
#brand:target p{
backgroumd:orange;
color:#fff;
}
