CSS3 结构性伪类选择器—target
03/09
: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;
}演示结果：
分析：
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：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;
}
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/121.html（转载时请注明本文出处及文章链接）
哟呵，上班还有空更新，还写那么多，是不是工作量不饱和
