zoukankan      html  css  js  c++  java
  • 关于伪类: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的使用,不仅可以实现页面的优化,也可以让代码结构更加清晰

  • 相关阅读:
    ftp命令行敲不了
    转载 vsftpd安装
    ftp上传不了故障
    mysql导入数据方法和报错解决
    time使用方法
    python 进程Queue
    python 进程事件
    python 进程信号量
    python 进程锁
    python 守护进程
  • 原文地址:https://www.cnblogs.com/just4play/p/5757618.html
Copyright © 2011-2022 走看看