CSS3新特性---新增选择器

最新推荐文章于 2023-10-14 14:36:35 发布

ATTACH_Fine

最新推荐文章于 2023-10-14 14:36:35 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/qq_48094059/article/details/117162224

版权

1. CSS新增选择器

1.1 属性选择器

属性选择器可以根据元素特定属性来选择元素。用中括号
属性选择器可以通过属性=值来选择元素
在这里插入图片描述

1.2 结构伪类选择器

一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后再看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E找到第n个孩子

1.3 伪元素选择器

：：before 在元素内部的前面插入内容
：：after 在元素内部的后面插入内容

 <title>仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';   伪元素选择器必须要写的属性
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(image/arr.png) no-repeat center;
        }

        /* 当我们的鼠标经过了 土豆这个盒子，就让里面before的遮罩层显示出来 */
        .tudou:hover::before {
            /* 不代表块元素，代表显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="image/tudou.jpg" alt="">
    </div>
</body>