Css3新增特性

最新推荐文章于 2024-07-01 20:14:37 发布

黄丫丫07

最新推荐文章于 2024-07-01 20:14:37 发布

阅读量151

点赞数

文章标签： css3 css html

本文链接： https://blog.csdn.net/m0_51495354/article/details/127964815

版权

新增选择器：

Css3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1 属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者ID选择器。

注意：类选择器、属性选择器、伪类选择器、权重为10

<!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>css3新增属性选择器

    </title>

    <style>

        /* 必须是input 但是同时具有value这个属性 选择这个元素 */

        /* input[value] {

            color: pink;

        } */



        input[type=text] {

            color: aquamarine;

        }



        /* 选择首先是div 然后 具有class属性 并且属性值必须是icon开头的这些元素 */

        div[class^=icon] {

            color: blueviolet;

        }



        section[class$=data] {

            color: aquamarine;

        }

    </style>

</head>



<body>

    <!-- 1 利用属性选择器就可以不用借助于类或者id选择器 -->

    <!-- <input type="text" value="请输入用户名">

    <input type="text">

    <br> -->

    <!-- 2 属性选择器还可以选择属性=值的某些元素 （重点）-->

    <input type="text">

    <input type="password">

    <!-- 3 属性选择器可以选择属性值开头的某些元素 -->

    <div class="icon1">小图标1</div>

    <div class="icon2">小图标2</div>

    <div class="icon3">小图标3</div>

    <div class="icon4">小图标4</div>

    <!-- 4 属性选择器可以选择属性值结尾的某些元素 -->

    <section class="icon1-data">woshi </section>

    <section class="icon2-data">woshi </section>

    <section class="icon3-dico">woshi </section>

</body>



</html>

2 结构伪类选择器

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

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

1. N可以是数字，关键字和公式
2. N如果是数字，就是选择第n个子元素，里面数字从1开始
3. N可以是关键字：even偶数，odd奇数（表格隔行变色）
4. N可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

区别：

1 nth-child对父元素里面所有的孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和e匹配

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

<!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>结构伪类选择器</title>

    <style>

        ul,

        ol {

            display: block;

            width: 150px;

        }



        /* 1 选择ul里面的第一个孩子 */

        ul li:first-child {

            color: pink;

        }



        /* 2 选择ul里面的最后一个孩子 */

        ul li:last-child {

            color: aquamarine;

        }



        /* 3 选择ul里面的第n个孩子 */

        ul :nth-child(5) {

            color: blueviolet;

        }



        /* 4 把所有的偶数的孩子选出来 （even）   奇数时odd */

        ul li:nth-child(even) {

            background-color: aqua;

        }



        /* 5 :nth-child(n) 从0开始 每次加1 往后面计算 这里必须是字母n */

        ol li:nth-child(n) {

            background-color: aquamarine;

        }

    </style>

</head>



<body>

    <ul>

        <li>我是第1个孩子</li>

        <li>我是第2个孩子</li>

        <li>我是第3个孩子</li>

        <li>我是第4个孩子</li>

        <li>我是第5个孩子</li>

        <li>我是第6个孩子</li>

        <li>我是第7个孩子</li>

        <li>我是第8个孩子</li>

    </ul>

    <ol>

        <li>我是第1个孩子</li>

        <li>我是第2个孩子</li>

        <li>我是第3个孩子</li>

        <li>我是第4个孩子</li>

        <li>我是第5个孩子</li>

        <li>我是第6个孩子</li>

        <li>我是第7个孩子</li>

        <li>我是第8个孩子</li>

    </ol>

</body>



</html>

小结：

结构伪类选择器一般用于选择父级里面的第几个孩子
Nth-child对元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和e匹配
Nth-of-type对父元素里面指定子元素进行排序选择。先去匹配e，然后根据e找第n个孩子
关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器，权重为10

3 伪元素选择器

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

选择符	简介
：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

注意：

Before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档中是找不到的，所以我们称为伪元素
语法：element：：before{}
Before和after必须有content属性
Before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

是

<!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>伪元素选择器before和after</title>

    <style>

        div {



            width: 200px;

            height: 200px;

            background-color: pink;

        }



        /* div::after权重是2 */

        div::before {



            display: inline-block;

            width: 30px;

            height: 30px;

            background-color: blueviolet;

            /* 这个content属性是必须要写的 */

            content: '我';



        }



        div::after {

            content: 'balabala';

        }

    </style>

</head>



<body>

    <div>

        shi

    </div>

</body>



</html>

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

<!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>伪元素选择器使用场景-字体图标</title>

    <style>

        @font-face {

            font-family: 'icomoon';

            src: url('fonts/icomoon.eot?rbgxhh');

            src: url('fonts/icomoon.eot?rbgxhh#iefix') format('embedded-opentype'),

                url('fonts/icomoon.ttf?rbgxhh') format('truetype'),

                url('fonts/icomoon.woff?rbgxhh') format('woff'),

                url('fonts/icomoon.svg?rbgxhh#icomoon') format('svg');

            font-weight: normal;

            font-style: normal;

            font-display: block;

        }



        div {

            position: relative;

            width: 200px;

            height: 30px;

            margin: 100px auto;

            border: 1px solid pink;

        }



        div::after {

            position: absolute;

            top: 5px;

            right: 5px;

            font-family: 'icomoon';

            content: '\e980';

            color: pink;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>

伪元素选择器使用场景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>仿土豆网</title>

    <style>

        .tudou {

            position: relative;

            width: 846px;

            height: 472px;

            background-color: aquamarine;

            margin: 100px auto;

        }



        .tudou::before {

            content: '';

            /* 隐藏遮罩层 */

            display: none;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, .3) url(images/播放.png) no-repeat center;



        }



        /* 当我们鼠标经过了 土豆这个盒子 就让里面before遮罩层显示出来 */

        .tudou:hover::before {

            display: block;

        }

    </style>

</head>



<body>

    <div class="tudou">



        <img src="images/tb.jpg" alt="">

    </div>

</body>



</html>

伪元素选择器使用场景3：伪元素清除浮动

1 额外标签法也称为隔墙法，是w3c推荐的做法