CSS3的新特性(一）新增选择器

最新推荐文章于 2023-04-04 19:09:23 发布

Bella..

最新推荐文章于 2023-04-04 19:09:23 发布

阅读量226

点赞数 2

分类专栏： html+css 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_57826863/article/details/122505744

版权

html+css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS3的现状：

1.CSS3新增选择器

1.1 属性选择器

1.属性选择器可以根据元素特定属性来选择元素，不用借助类或者id选择器

匹配上面选择符：

^表示选择开头，$选择结尾，*选择任意名字

  <style>
      /* 1.必须是input，但同时具有value这个属性 */
        /* input[value]{
            color: pink;
        } */
        
        /* 2. */
        /* input[type=text]{
            color: pink;
        } */


        /* 3.选择首先是div，然后具有class属性，并且属性值必须是icon开头的这些元素 */
        /* div[class^=icon]{
            color: red;
        } */

        /* 4 */
        section[class$=data]{
            color: royalblue;
        }
    </style>
</head>
<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
            <!-- 目标只选择第一个文本框 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text" > -->
    <!-- 2.属性选择器还可以选择属性=值的某些元素 重点记住-->
            <!-- 目标只选择文本框 -->
    <!-- <input type="text" name="" id="">
    <input type="password" name="" id=""> -->
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
         <!-- 目标同时选择小图标 -->
    <!-- <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>  -->
    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是乌鲁乌鲁</section>
</body>

注意：类选择器，属性选择器，结构伪类选择器，权重10

1.2 结构伪类选择器

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

2.选择符分类

前三个选择符：style里面ul后空格li时后代选择器

 <style>
        /* 1.选择ul里第一个孩子 */
        ul li:first-child{
            background-color: royalblue;
        }
        /* 2.选择最后一个孩子 */
        ul li:last-child{
            background-color: pink;
        }
        /* 3.选择第2个孩子 */
        ul li:nth-child(2){
            background-color: plum;
        }
    </style>
</head>
<body>
    <ul>
        <li>孩子1</li>
        <li>孩子2</li>
        <li>孩子3</li>
    </ul>
</body>

3.nth-child(n)的重点应用（无序列表中用的更多）

nth-child（n）选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数（放括号里面就能选出奇数行和偶数行进行样式设定）
可以是公式：常见的公式如下（若n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被省略）

例如：body里面给出ol里面分别有8个li，在style里面

ol li：nth-child(n){

background-color：pink；

}

表示：nth-child(n) 从0开始每次加1 往后面计算括号里面必须是n，不能是其他字母，n意味着选择了所有孩子

2n：n从0开始一直到最大（例如有8个li，就到8）----->2*n--->0，2，4，6，8

选择了所有的偶数的孩子==等价于even

n+5：n从0开始一直到最大，即0+5=5,1+5=6,2+5=7......一直到最后

-n+5：n从0开始一直到最大，-n是-0，-1，-2，-3，-4，-5，加5就是从5到0

后三个选择符：

ul li:first-of-type:选择第一个孩子

ul li:last-of-type:选择最后一个孩子

ul li:nth-of-type(even):选择偶数孩子，用法与nth-child()一模一样

前三个与后三个区别(开发中常见)：

1.nth-child对父元素里面的所有孩子排序(序号是固定的)先找到第n个孩子，然后看是否能和E匹配

2.nth-of-type对父元素里面指定子元素进行排序选择，先匹配E，然后再根据E找第n个孩子

区别举例：

    <style>
        /* nth-child 会把所有盒子都排列序号 */
        /* 执行的时候首先看nth-child()括号里面的数字  之后回去看前面的div */
        section div:nth-child(1){
            background-color: red;
            /* 这个输出是错的，因为第一个标签是p不是div */
        }

        /* nth-of-type  会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1){
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

1.3 伪元素选择器（重点）

1.3.1 伪元素选择器基本使用

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要html标签，简化html结构

第四个使用原理：before和after都在盒子里，before在内容的最前面，after在内容的最后面

这是注意点第四个的应用，必须有content属性：

before，after是行内元素无法设置大小，如果要设置宽高，先转化成行内块元素

1.3.2 伪元素选择器使用场景1：伪元素字体图标

eg：一个盒子有下拉按钮或小米侧边栏的左向按钮

 <style>
    div{
        position: relative;
        width: 200px;
        height: 35px;
        border: 1px solid red;
    }
     /* 子绝父相 */
    div::after{
        position: absolute;
        top: 10px;
        right: 10px;
        color: red;
        font-size: 18px;
        font-family: 'icomoon';
        content: '箭头';
        /* 此处按照插入小图标的方法把箭头插入进去，或者复制给出的字符e91e但是在前面加\ */
    }

    </style>
</head>
<body>
    <div></div>

1.3.3 伪元素选择器使用场景2：仿土豆效果黑色遮罩层

  <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            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(images/arr.png) no-repeat center;
        }

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

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

</html>

1.3.4 伪元素选择器使用场景：伪元素浮动清除浮动本质

清除浮动第三种：父级添加after伪元素

通过after伪元素创建一个盒子，类似隔墙法升级

代码解释：

清除浮动第四种：父级添加双伪元素（形成闭合）

代码解释：

Bella..

关注

2
点赞
踩
1

收藏

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

CSS3的现状：1.CSS3新增选择器1.1 属性选择器1.属性选择器可以根据元素特定属性来选择元素，不用借助类或者id选择器2.匹配上面选择符：^表示选择开头，$选择结尾，*选择任意名字 <style> /* 1.必须是input，但同时具有value这个属性 */ /* input[value]{ color: pink; } */ /* 2. */
复制链接

扫一扫