CSS特性之层叠性

CSS的层叠性

1、层叠性的条件

（1）元素相同

（2）属性相同

（3）优先级相同

2、层叠性的样式冲突

（1）引用方式冲突

        CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级内联样式>内嵌样式>导入样式>链接样式；

CSS的部分

body{
	background: #000000;
}

HTML的部分

	
	



	
优先级

（2）继承方式冲突

这个可以这样比喻，比如我当前的对象为儿子，那么和儿子最近是父亲，再近一点的是爷爷，，所以显示的是他父亲。

	



	

		

			

				
继承冲突
			
		
	

有一些人，会进一些死胡同里，比如我，当时不知道怎么想的，当把文本放置在“父亲”上时，而父亲本身没有带CSS样式，那么显示的是“爷爷”，还是“儿子”，这个可以比喻为当前的对象为刚出生，那么“父亲”刚出生，怎么可能有“儿子”，所以显示的是“爷爷”，其实质是因为“儿子”的范围不包括父亲。

	



	

		

			
继承冲突
			

			
		
	

（3）指定样式冲突

当指定的样式发生冲突时，根据权重，进行比值；注意只有权重相同时，才会根据“后来居上”原则

选择器权重

选择器	权重
通配符	0
伪元素	1
元素选择器	1
class选择器	10
伪类	10
属性选择器	10
id选择器	100
行内选择器	1000

常见的伪元素有“：before”“：after”“：first-letter”“first-line”

常见的伪类：“hover”“first-child”

	
	



	

		
继承冲突
	

id的权重最大，所以显示green。

（4）继承样式与指定样式冲突

当两者冲突时，以指定样式优先

（5）！important

！important可以改变优先级，如果使用它，则该样式可以覆盖在其他任何样式上面