什么是target伪类？先看一下解释：
URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。
举个例子：
<html>
<a href="#target">点我</a>
<div id="target"><div>
</html>
正常情况下，a标签里会跟一个url，但是在这里我们添加的不是url，而是一个锚点，当我们点击a时，本页面的url后面会添加上"#target"，并且，id为target的div块就处于了当前活动状态
那么，这究竟有什么用呢？
其实这用处可多了，可以利用这种特性，不使用js就能实现一些交互效果
还是上面的代码，为其添加css
#target:not(:target) {
display : none;
}
#target:target {
display : block;
width : 100px;
height : 100px;
border : 1px solid red;
}
如果我们不点击a元素，div元素就不显示，如果我们点击了a元素，div就显示成一个100*100，并且拥有红色边框的块；
如果了解了这种简单的用法，我们就可以用它实现一些稍微复杂一点的东西，比如可以实现一个自由切换的tab栏，或者一个可以进入和退出的导航栏
合理利用target伪类可以减少js的使用，不仅可以实现页面的优化，也可以让代码结构更加清晰
时间： 2024-11-12 12:05:10