CSS / CSS3新特性-新增的选择器

winglamx

已于 2022-07-11 14:13:36 修改

阅读量438

点赞数

分类专栏：前端学习文章标签： css css3 前端

于 2022-02-24 17:18:48 首次发布

本文链接：https://blog.csdn.net/qq_39565174/article/details/123089078

版权

前端学习专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS3的现状

新增的css3特性有兼容性问题，ie9+才支持

移动端的支持优于PC端

新增的选择器

属性选择器

可以根据元素特定的属性来选择元素

用[]来选择

input[value] {} ，选中包含value属性的input元素

input[value="aaa"] {} ，选中包含value属性且value值为aaa的input元素

input[value^="bbb"] {} ，选中包含value属性且值以bbb开头的input元素

input[value$="ccc"] {} ，选中包含value属性且值以ccc结尾的input元素

input[value*=“ddd”] {}，选中包含value属性且值包含ddd的input元素

标签选择器权重为1

类选择器、属性选择器、伪类选择器的权重都为10

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

E:first-child 匹配父元素中的第一个子元素E ul(空格):first-child (省略了子元素的名字) ul li:fist-child
E:last-child 匹配父元素E中的最后一个子元素
E:nth-child(n) 如 ul li:nth-child(3) n可以是数字关键字和公式

数字：n如果是数字则指第n个子元素，从1开始

关键字：even偶数 odd奇数

公式：括号中字母必须为n n从0开始，每次+1，依次运算 2n偶数 2n+1奇数 n为所有 5n 五的倍数 n+5 从第五个开始 -n+5 从第五个往前（前五个，包含第五个）不能写成5-n

    <style>
        ul li:nth-child(-n+5) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

区别：当父元素里有多个类型的子元素

nth-child会把所有的盒子都排列序号，序号是固定的，执行时先找到第n个子元素，再看元素类型，必须第n个元素和指定的元素类型匹配才有样式显示。

nth-of-type会先看元素类型，找到该元素类型的第n个子元素

如：section父元素里既有p子元素又有div1 div2子元素 div1为div:nth-of-type(1)

无序列表中ul只会包含li，用nth-child更多

权重为10

伪元素选择器

利用CSS创建新标签元素，而不需要html标签，从而简化html结构

element::before{} 在父元素内容前面创建元素

::after 在父元素element内容后面创建元素一定在element里面

创建的是行内元素
新创建的元素在文档中是找不到的，所以称为伪元素
before和after必须包含content属性 content:'' 即使空着也不能省略
伪元素选择器和标签选择器权重一样为1

div::after 权重为2

伪元素字体图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        /* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('../DAY12/fonts/icomoon.eot?zdtxwn');
            src: url('../DAY12/fonts/icomoon.eot?zdtxwn#iefix') format('embedded-opentype'),
                url('../DAY12/fonts/icomoon.ttf?zdtxwn') format('truetype'),
                url('../DAY12/fonts/icomoon.woff?zdtxwn') format('woff'),
                url('../DAY12/fonts/icomoon.svg?zdtxwn#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 40px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            content: '';

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

content里可以不复制特殊字符直接用反斜杠\+编号如\e91e

仿土豆播放器视频遮罩

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 100px auto;
            position: relative;
            width: 400px;
            height: 300px;

        }

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

        /* .black div { */
        .video::before {
            /* 伪元素选择器必有 */
            content: '';

            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, 0.3) url(arr.png) no-repeat center;
        }

        /* .black .arr {
            position: absolute;
            width: 34px;
            height: 34px;
            left: 50%;
            margin-left: -14px;
            top: 50%;
            margin-top: -14px;
        } */

        /* 
        .black {
            display: none;
        } */

        .video:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="video"><img src="tudou.jpg"></a>
        <!-- <a href="#" class="black">
            <div></div>

            <img src="arr.png" class="arr">
        </a> -->
    </div>
    </div>

    </div>
</body>

</html>

父类:hover::before 鼠标经过显示伪元素

伪元素清除浮动

单：插入元素必须是块级元素高度和hidden是为了隐藏元素

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

        }

        .clearfix {
            *zoom: 1;
            /* IE6 7使用 */
        }

双：浮动前后都插入伪元素，table是为了转化成块级元素并在一行显示，如果用inline-block会有空隙，而table中没有内容是默认看不见的

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

winglamx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS / CSS3新特性-新增的选择器

目录CSS3的现状新增的选择器属性选择器结构伪类选择器伪元素选择器CSS3的现状新增的css3特性有兼容性问题，ie9+才支持移动端的支持优于PC端新增的选择器属性选择器可以根据元素特定的属性来选择元素用[]来选择input[value] {} ，选中包含value属性的input元素input[value="aaa"] {} ，选中包含value属性且value值为aaa的input元素input[value^="bbb"] {} ，
复制链接

扫一扫