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

效果如下:

CSS3 结构性伪类选择器 :target

分析:

  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 对象分别设置不的样式。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 18. CSS3 结构性伪类选择器 :target

发表回复