css3 target伪类学习

最新推荐文章于 2020-08-13 10:26:24 发布

胖鹅68

最新推荐文章于 2020-08-13 10:26:24 发布

阅读量595

点赞数

分类专栏： css 、 css3、sass、less

本文链接：https://blog.csdn.net/hbiao68/article/details/52683478

版权

css 、 css3、sass、less 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。

定义和用法

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="always">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../public/css/hb_wap.css">
    <title>less 学习</title>
</head>
<body>

<style>
    #test:target{
        background-color: lightblue;
    }

    #nav{
        display: none;
    }
    #nav:target{
        display: block;
    }
    #nav:target .btn_close{
        display: inline-block;
    }

    /* 默认是隐藏关闭按钮 */
    #nav .btn_close{
        display: none;
    }
    /* 默认是隐藏关闭按钮 */
    #nav:target .btn_close{
        display: block;
    }
    .btn{
        position: absolute;
        left: 60px;
        top: 0px;
    }
</style>

<div class="relative">
    <a href="#nav" class="btn_open btn" style="background-color: red">显示</a>
    <ul class="list_unstyled" id="nav">
        <li>张三1</li>
        <li>张三2</li>
        <li>张三3</li>
        <li>张三4</li>
        <a href="#sss" class="btn_close btn" style="background-color: blue">关闭</a>
    </ul>
</div>

</body>
</html>

大小: 2 KB

查看图片附件

胖鹅68

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3 target伪类学习

所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。定义和用法URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。 less 学习
复制链接

扫一扫