结构性伪类选择器—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;
}
