关于伪类:target

什么是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的使用,不仅可以实现页面的优化,也可以让代码结构更加清晰

原文地址:https://www.cnblogs.com/just4play/p/5757618.html