CSS的三大特性

CSS有三大特性：层叠性、继承性、优先级。

1.层叠性

如果给相同的选择器设置了相同的样式，此时靠近标签的选择器会覆盖另一个选择器。层叠性可以解决样式冲突的问题。若样式不冲突，则不会层叠。

2.继承性

子标签会继承父标签的某些样式，如文本颜色和字号等与文字相关的属性。恰当利用CSS的继承性可以简化我们的代码，降低CSS样式的复杂性。例如：

    <style>
        div {
            color: blue;
            font-size: 14px;
        }
    </style>
    <div>
        <p>
            好好学习，天天向上。
        </p>
    </div>

标签p里面的字体和颜色就会继承标签div。

需要注意的是，盒子的宽度、高度、盒子模型的内外边距不会被继承。

3.优先级

当给同一个元素指定多个选择器，就会按照优先级去执行相应的选择器。

以下是各选择器的权重：

• 继承或者通配符 0，0，0，0

• 元素选择器 0，0，0，1

• 类选择器、伪类选择器 0，0，1，0

• ID选择器 0，1，0，0

• 行内样式表 1，0，0，0

• ！important 无穷大

权重由4位不会进位的数字组成。比如类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推。权重判断从左到右，如果一个数值相同，则判断下一位数值。

3.1关于CSS权重的叠加

如果是复合选择器，则会由权重的叠加，需要计算权重。例如：

• div ul li-------->0,0,0,3

• .nav ul li-------->0,0,1,2

• a:hover--------->0,0,1,1