6-5 CSS3 结构性伪类选择器—target
本节编程练习不计算学习进度,请电脑登录imooc.com操作

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

任务

在CSS编辑器中的第一行输入正确的代码,当你点击链接后,段落p将添加橙色背景和白色文字。

(这个题目稍微比本小节中的案例难一些,怎么样挑战一下自己!)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>结构性伪类选择器—target</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div class="menuSection" id="brand">
  10. <h2><a href="#brand">Brand</a></h2>
  11. <p>content for Brand</p>
  12. </div>
  13. </body>
  14. </html>
  1. ? p {
  2. background: orange;
  3. color: #fff;
  4. }
下一节