CSS之：样式层叠

小瑾♡学Web

已于 2023-10-30 09:58:27 修改

阅读量36

点赞数

文章标签： css 前端

于 2023-10-30 09:42:13 首次发布

本文链接：https://blog.csdn.net/YJXselect/article/details/134112521

版权

样式层叠

声明冲突：同一个样式，多次应用到同一个元素

样式层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1.比较重要性

重要性从高到低：

作者样式表：开发者书写的样式

1）作者样式表中的！important样式

2) 作者样式表中的普通模式

3）浏览器默认样式表中的样式

!important：最最最高级别重要，不到万不得已不要用

2.比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个四位数（XXXX）

1.千位：如果是内联样式，记作1，否则0

2.百位：等于选择器中所有id选择器的数量

3.十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4.各位：等于选择器中所有元素选择器、伪元素选择器的数量

<!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>

        a{

            /* 0001 */

            color: red;

        }

        div ul a{

            /* 0003 */

            color: seagreen;

        }

        #mydiv #myul a{

            /* 0201 */

            color: steelblue;

        }

        #mydiv #myul .mylink{

            /* 0210 */

            color: turquoise;

        }

        #mydiv #myul a:hover{

            /* 0211 */

            color:violet

        }

        #mya{

            /* 0100 */

            color: rgb(44, 0, 37);

        }

    </style>

</head>

<body>

    <div id="mydiv">

        <ul id="myul">

            <li id="myli">

                <a class="mylink" href="https://ys.mihoyo.com/">原神</a>

                <a style="color: blue;" href="https://ys.mihoyo.com/">原神</a>

                <!-- 1000 -->

            </li>

        </ul>

    </div>

</body>

</html>