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

来源：互联网发布：matlab入门编程编辑：程序博客网时间：2024/06/08 06:45

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 标记将这个属性的权重最大化了。

总结

这里写图片描述

1 0