css层叠

css层叠概念

层叠是CSS的一个基本特征，就是浏览器对多个样式来源进行叠加，最终确定结果的过程.

例子1：

三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。

选择器排序优先级

ID选择器 > 类选择器 > 标签选择器

例子2：计算权重

统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。

例子3：权重相同时

就近原则：第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后。

例子4：让一个列表实现如下这种样式：第一个li为红色，剩下的li全部为蓝色。

把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重。

例子5：继承性造成的影响

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。

图表：

CSS样式表的冲突的总结

• 1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）

• 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器

• 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

!important标记

用来给一个属性提高权重。这个属性的权重就是无穷大。

注意：

（1）!important提升的是一个属性，而不是一个选择器

p{
			color:red !important;    只写了这一个!important，所以只有字体颜色属性提升了权重
			font-size: 100px ;       这条属性没有写!important，所以没有提升权重
		}
		#para1{
			color:blue;
			font-size: 50px;
		}
		.spec{
			color:green;
			font-size: 20px;
		}

（2）!important无法提升继承的权重，该是0还是0

HTML结构：

<div>
	<p>哈哈哈哈哈哈哈哈</p>
</div>

有CSS样式：

div{
		color:red !important;
	}
	p{
		color:blue;
	}

PS: ! important尽量不要使用。会让css写的很乱。

参考：

https://www.cnblogs.com/qianguyihao/p/7253929.html