来瞧瞧CSS的三大特性

CSS三大特性

一、层叠性

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

层叠性原则：

• 样式冲突，遵循就近原则，即哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

/*golden颜色离结构近，因此会覆盖掉purple颜色*/
/*因为第二个样式中没有对字体大小进行设定，因此不会覆盖第一个样式中字体属性*/


	
紫金王朝

二、继承性

子标签会继承父标签中的某些样式。

	

		
紫金王朝
	

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

行高的继承性

	
科比
   /*  16*1.5  */
	
乔丹
   /*  12*1.5  */
	

		
库里
/*没有直接指定文字大小，因此继承父元素的文字大小*/
	

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

三、优先级

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

• 选择器相同，则执行层叠性
• 选择性不同，则根据选择器权重执行

选择器	权重
继承或*（通配符）	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
!important	无穷大

	
"test" id="demo" style="color: purple">紫金王朝

优先级注意点：

1. 权重是由4组数字组成的，不会有进位。
2. 权重高的选择器永远大于权重低的选择器。
3. 等级判断从左往右，如果某一位数值相同，则判断下一位数值。
4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

	
"father">
		
紫金王朝
	

金色属性的权重是无穷大，紫色属性的权重是（0，0，0，1），但是显示结果是紫色。 因为

的继承权重是0，所有要看标签到底执行哪个，就先看这个标签有没有直接被选出来。

	"#">科比

在浏览器中，a链接被默认指定了一个样式（蓝色，下划线）。如果对body指定样式并不会影响a链接的样式，因为继承的权重位0。因此如果想要修改a链接的样式，必须单独对a链接进行指定。

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

/*权重叠加问题，谁的权重大显示谁，但叠加永远不会产生进位*/


	
"nav">
		
科比
		
乔丹
		
詹姆斯
	

执行紫色