CSS学习（六）：CSS的三大特性

原文链接：CSS学习（六）：CSS的三大特性

CSS有三个非常重要的特性：层叠性，继承性和优先级。

1. 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖 另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
• 样式不冲突就不会重叠。

例如，给div 同时设置两个相同的样式产生样式冲突：

div {
    color:red;
}
div {
    color:pink;
}

<div>
    猜猜我是什么颜色。
</div>

这时，div的文本颜色就会被设置成粉色，这就是就近原则。

若相同选择器存在一些属性不冲突，就不会产生样式冲突，因此不会重叠，例如：

div {
    color:red;
    font-size:12px;
}
div {
    color:pink;
}

<div>
   	猜猜我的文本颜色和字体大小。
</div>

这时，div 的文本颜色为粉色，字体大小为12px，也就是说两个选择器都起了作用，主要是因为第一个选择器中的字体大小属性不会被重叠。

2. 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

例如：

div {
    color:pink;
    font-size:12px;
}

<div>
    <p>
        我的颜色和字体大小和div设置的相同。
    </p>
</div>

p标签文本颜色为粉色，字体大小为12px，继承了div的样式属性。

• 恰当使用继承可以简化代码，降低CSS样式的复杂性。
• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）。

行高的继承性：

body {
    font: 12px/1.5 'Microsoft Yahei';
}

• 行高可以跟单位也可以不跟。
• 如果子元素没有设置行高，则会继承父元素的行高为1.5.
• 此时子元素的行高是：当前子元素的文字大小*1.5。
• body行高1.5这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高。

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选择器永远大于类选择器，以此类推。
• 等级判断从左至右，如果某一位数值相同，则判断下一位数值。
• 继承的权重是0，即使加了！important也是0。不管父元素权重多高，子元素继承过来权重都会变成0。
• a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式

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

例如：

/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2*/
ul li {
    color:green;
}
/* li 权重是 0,0,0,1 */
li {
    color:red;
}

因此，li的文本颜色为绿色。权重虽然会叠加，但是不会有进位。