CSS层叠性（一学就会）

最新推荐文章于 2024-07-22 20:28:40 发布

weixin_40231155

最新推荐文章于 2024-07-22 20:28:40 发布

阅读量467

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_40231155/article/details/106005148

版权

层叠性：就是css处理冲突的能力，这里涉及到权重计算
举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #aa .bb li{
            color:blue;
        }
        #aa ul li{
            color: red;
        }
    </style>
</head>
<body>
    <div id="aa">
        <ul class="bb">
            <li class="cc">我是啥颜色</li>
        </ul>
    </div>
</body>
</html>

运行代码可以发现文本显示的颜色为蓝色，这是因为权重 id选择器>类选择器>标签选择器
通常权重比可看作 1个id选择器=255个类选择器（这个了解就行）

 #aa .bb li   //为 1个id选择器，1个类选择器，1个标签选择器
 #aa ul li    //为 1个id选择器，2个标签选择器

所以最终显示为蓝色
我们再看一个例子

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #aa .bb li{
            color:blue;
        }
        #aa ul .cc{
            color: red;
        }
    </style>
</head>
<body>
    <div id="aa">
        <ul class="bb">
            <li class="cc">我是啥颜色</li>
        </ul>
    </div>
</body>
</html>

如果计算一下的话就可以发现，上面两个css的权重是一样的，就个时候就要看就近原则，谁在下面就显示是谁， #aa ul .cc在下面，所以显示结果为红色。

当然计算权重的前提是css指向了文本的标签权责器li或者类选择器cc，假如只是继承父类属性的话，就按照就近原则，比如

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #aa{
            color:blue;
        }
       div ul{
            color: red;
        }
    </style>
</head>
<body>
    <div id="aa">
        <ul class="bb">
            <li class="cc">我是啥颜色</li>
        </ul>
    </div>
</body>
</html>

如果只比权重类选择器#aa肯定要高于2个标签选择器div ul的，但2个标签选择器离文本更近，所以最终显示红色，只需记住一句话，先比远近，再比权重
有什么问题欢迎私信我~