首页 > 代码库 > css3--:target选择器称为目标选择器
css3--:target选择器称为目标选择器
:target
选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。
示例展示
点击链接显示隐藏的段落。
HTML代码:
<h2><a href="http://www.mamicode.com/#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="http://www.mamicode.com/#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="http://www.mamicode.com/#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="http://www.mamicode.com/#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对象分别设置不的样式。
我的理解:
就是通过::target这个选择器让a标签里面的href来控制和href里面名字一样的id相对应的元素
css3--:target选择器称为目标选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。