CSS的三大特性（层叠性、继承性、优先级）

@[TOC](CSS的三大特性)

CSS层叠性

CSS层叠性：当给相同的选择器设定相同的样式（比如都设置color），这时会引发样式冲突，层叠性的出现解决了这一样式冲突的问题，后面的样式会重叠（覆盖）前面的样式

CSS继承性

CSS继承性(inherited form)：子标签会继承父标签的某些样式,主要是跟文字相关的样式(text-、font-、line-以及color)，简单理解就是：子承父业

CSS优先级

CSS优先级：当同一个元素被多个选择器选中，就需要考虑优先级的大小进行样式设定，这里可以用选择器权重值总和来区分

• 当选择器相同，按照层叠性设定样式
• 当选择器不同，按照选择器权重值的大小总和设定样式

各个选择器的权重值

选择器	权重值
继承和*	0
元素选择器	1
类选择器(.)	10
ID选择器(#)	100
行内样式(style="")	1000
!important	无穷大

示例：

div div p {
	color: red;
}
/*权重值总和为1+1+1*/
#demo2 {
	color: green;
}
/*权重值总和为1000*/
div .demo1 {
	color: blue;
}
/*权重值总和为1+100*/
#box1 {
	color: yellow;
}
/*权重值总和为0，因为#box1是父元素，直接继承*/

<div>
	<div id="box1">
		<p class="demo1" id="demo2">这是一个自然段</p>
	</div>
</div>

综上<p>中文字的颜色是蓝色（权重值最大）