CSS

CSS3结构性伪类选择器target

字号+ 编辑: Snake 修订: SyncLWT 来源: 慕课网 2023-09-10 我要说两句(0)

:target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

结构性伪类选择器—target

:target选择器称为目标选择器

用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。

示例展示:点击链接显示隐藏的段落。

HTML代码:

<h2><a href="#brand">Brand</a></h2>
<div id="brand">
    content for Brand
</div>

CSS代码:

.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

演示结果:

 图片34.png

分析:

  • 具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

  •  :target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。

多个url(多个target)处理:

就像上面的例子,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。

如下面例子:

html代码:  

<h2><a href="#brand">Brand</a></h2>
<div id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div 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对象分别设置不的样式。

index.html代码:

<!DOCTPE HTML>
<html>
    <head>
        <meta chrset="utf-8">
        <title>结构性伪类选择器——target</title>
        <link href="style.css" ref="stylesheet" type="text/css">
    </head>
    <body>
        <div class="menuSection" id="brand">
            <h2><a href="#brand">Brand</a></h2>
            <p>content for Brand</p>
        </div>
    </body>
</html>

style.css代码:

#brand:target p{
    backgroumd:orange;
    color:#fff;
}

阅完此文,您的感想如何?
  • 有用

    1

  • 没用

    1

  • 开心

    1

  • 愤怒

    1

  • 可怜

    1

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • 多个高度相同, 属性inline-block的div,有的div没有内容而有的div有内容,有内容的会下沉?

  • 让整个网页全局变成黑白色调的css代码

  • CSS生成内容

  • CSS3外轮廓属性

我要说说
网上嘉宾点评