CSS中的层叠性、继承性、优先级、权重

css三大特性：

三大特性：层叠性、继承性、优先级

层叠性：

指多种css样式的叠加，是浏览器处理多种css样式冲突的能力，如果给一个元素通过不同或者相同的选择器设置相同的属性但属性值不同时，权重相同的情况下，冲突属性后面的属性(值)会把前面的属性(值)层叠(覆盖)。

	p {color: red;}p {color: yellow;/* 后面的属性会把前面的属性覆盖掉 */}<p>显示的为yellow色</p>

继承性：

指子元素会继承父标签的某些样式，给父标签设置的某属性，如果在子标签中未设置该属性，子元素则会继承父标签的这个属性及值，需要注意的是并不是所有属性都可以被继承。

	div {color: pink;}<div><p>显示的是pink色</p></div>

css优先级：
指多个规则同时出现在某个元素上，该执行哪个规则的问题，在权重相同的情况下，css书写靠后面的会执行，否则按照下面权重大小执行
在这里插入图片描述

	div {color: blue!important;/*!important使用方法*/}

权重叠加：

CSS特殊性（Specificity）：

关于权重叠加，这里有计算公式：CSS Specificity称为CSS 特性或称非凡性，它是衡量css值优先级的一个标准，specificity用一个四个级别的数字串表示，从左到右级别递减，同级别的数字可以相加，但是级别之间没有进制
在这里插入图片描述

权重叠加计算：

相同级别间的权重可以相加，但是不能向上一级进位，如： 0,0,0,3 + 0,0,0,9 =0,0,0,12 而不是 0,0, 1, 2

	 /*权重叠加计算：*/div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1div p {color: red;/* 此权重大于下面的权重，所以显示的是红色red */}p {color: yellow;}<div><p>测试文本</p></div>