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; }