CSS三大特性——层叠性、继承性和优先级（权重的叠加）

CSS三大特性

层叠性

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

层叠性原则：

​ 样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式。

​ 样式不冲突，不会层叠。

例如

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

在页面中会显示20像素粉色的文字，后面粉色会覆盖红色，但是前面文字大小并不会被覆盖。

继承性

CSS中子标签会继承父标签的某些样式。（主要继承与文字有关的样式）

适当使用继承可以简化代码。

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

div {
	font-size: 14px;
}

div字体大小覆盖了body字体的大小，行高1.5倍，是当前字体大小的1.5倍，所以此时行高为21px；

行高设置1.5倍的优势就是可以根据自己文字的大小调整行高。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性。

选择器不同，则根据选择器权重。

选择器权重表

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important重要的	∞ 无穷大

div{
	color: blue!important;
}

无论其他选择器位置如何，div里面文字颜色为蓝色。

权重由四组数字组成，永远不会有进位，比较时从左往右比较，如果某一位一样，就比较下一位。

继承权重为0，只要是继承过来的，权重都为0 。

a链接，浏览器默认指定了样式，蓝色有下划线，因此a继承过来的样式，a不会改变。

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

ul li {
	color: green;
}
li {
	color: red;
}

此时，li中的文字颜色会变成绿色。ul li 的权重为0,0,0,1+0,0,0,1，而li的权重为0,0,0,1，因此ul li的权重更高。

权重会叠加，但是不会有进位。