CSS的继承性、层叠性、权重

CSS像艺术家一样优雅，像工程师一样严谨

继承性

CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color 属性设置字体颜色，后代自动继承。CSS的继承特性，一定程度上简化了代码的操作，至少方便了我这类懒癌患者。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        .div1{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <ul>
            <li>我最帅</li>
            <li>我最帅</li>
            <li>我最帅</li>
            <li>我最帅</li>
        </ul>
    </div>
</body>
</html>

这里，在div中设置color，他的后代元素li中的文字，都被设置为了红色，这就是继承性。

注意，并不是所有的CSS属性都会继承，常见的继承属性有：

color、 text- _ 、line-_ 、font- 。

拥有继承的通常是关于文字样式的，所有关于盒子的、定位的、布局的属性都不能继承。

层叠性和权重

层叠性：就是css处理冲突的能力。

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

可以这样理解权重：这个选择器对于这个元素的重要性。

权重的计算

权重的计算也很简单，当选择器选上了某个元素的时候，就会统计权重，计算的格式为：

id数量，类的数量，标签的数量

如选择器直接作用到p标签：

#box .imp p{
}

的权重为： 1，1，1

div.imp div.imp2 div.imp3 p{
}

的权重为： 0，3，4

那么如何比较权重的大小？

将权重看作三位数，比较即可，但是注意，权重不可以进位！！！（理论上255个标签可以进一位）

比如权重 1，0，0 > 0,100,100

如果两个选择器权重相同会如何？

当选择器的权重相同时，会选择声明在后面的选择器，类似于变量赋值。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        p{
            color: red;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="p1">我最帅！！</p>
</body>
</html>

此时颜色显示为蓝色，因为两个选择器权重相同，蓝色位置靠后。

继承的属性的权重？

前面的案例选择器都直接作用到了p标签，如果效果不是由选择器直接作用的，而是由其他选器继承而来的属性，那么这个属性对于这个元素的权重就为0。

如果两个选择器的权重都为0，就采取继承特性。（即网上所说的就近原则，感觉用继承解释比较合理）

个人认为这个问题没有什么必要去进行处理，如果选择器的权重是0，那么，选择器就不是作用在这个标签上的，也就和这个标签没有关系。这个标签获得的选择器中的某些属性，都是继承来的。权重为0可能是底层的计算。但是这样理解未免有些绕圈圈了。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        /*对于p来说，这个权重为0*/
        .div1 .div2 .div3 {
            color: red;
        }
        /*权重为0，0，1*/
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">
            <div class="div3">
                <p>我最帅</p>
            </div>
        </div>
    </div>
</body>
</html>

important 标记

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        p{
            color: red !important;
            /*注意：！important 只能作用在属性值中！！！
              且，对于继承无用
                 不影响就近原则*/
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="p1">我最帅！！</p>
</body>
</html>

此时会显示红色，因为 !important 标记将这个属性的权重最大化了。

总结

上一页CSS 下一页CSS浮动float详解（一）：标准文档流

最后更新于29天前

hashtag继承性

hashtag层叠性和权重

hashtag权重的计算

hashtag那么如何比较权重的大小？

hashtag如果两个选择器权重相同会如何？

hashtag继承的属性的权重？

hashtagimportant 标记

hashtag总结

继承性