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

2021-06-20 18:03

阅读：472

标签：menu css 目标 menus 包含代码文档匹配 http

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

示例展示

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

HTML代码：

Brand

    content for Brand

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代码：

Brand

  content for Brand

Brand

 content for jake

Brand

    content for aron

css代码：

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

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

我的理解：

就是通过：：target这个选择器让a标签里面的href来控制和href里面名字一样的id相对应的元素

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

标签：menu css 目标 menus 包含代码文档匹配 http

原文地址：http://www.cnblogs.com/laijinquan/p/7189429.html

上一篇：NSURLSession下载文件-代理

下一篇：WebService:JAX-WS实现WebService

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css3--:target选择器称为目标选择器
文章链接：http://soscw.com/index.php/essay/96529.html

亲，登录后才可以留言！

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

Brand

Brand

Brand

Brand

评论

热门文章

推荐文章

最新文章

置顶文章