18. CSS3 结构性伪类选择器 :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;
}

效果如下：

分析：

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

上面的代码可以对不同的 target 对象分别设置不的样式。

以上关于18. CSS3 结构性伪类选择器 :target的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。