CSS 三大特性

层叠性

层叠性指多种CSS样式的叠加，如果一个属性通过两个相同的选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

div {
	color: skyblue;
	font-size: 12px;
}
div {
	color: hotpink;
}

<div> Cat 的中文意思是猫 </div>

继承性

继承性指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色、字号。在这里插入代码片

div {
	color: red;
	font-size: 20px;
}

<div>
	<p>张三三</p>
</div>

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

优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

优先级

/*  0， 0 ， 0 ， 0  特殊性公式 */
div {  /* 标签选择器  0,0,0,1*/
	color: red;
}
:first-child {  /* 伪类选择器 0,0,1,0 */
	color: green;
}
.king {  /* 类选择器  0,0,1,0 */
	color: blue;
}
#wang {  /* id选择器   0,1,0,0 */
	color: red;
}
/* 最大的  不是选择器 */
div {
	color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
}

<div class="king" id="wang" style="color: skyblue"> 王者农药 </div>

权重叠加

ul li { /*  ul 0001  li 0001  叠加  0,0,0,2 */
	color: green;
}
li { /*  0,0,0,1 */
	color: red;
}
nav ul li {/* 叠加之后的  0,0,0,3  最后执行蓝色*/
	color: blue;
}
.daohang ul li {  
	color: red;
}

<nav class="daohang">
	<ul>
		<li>张三</li>
		<li>李四</li>
		<li>赵五</li>
	</ul>
</nav>

继承的权重为0

.daohanglan { /*  0,0,1,0  是 nav 的  不是 li */
	color: red;
}
li {  /*  0,0,0,1 */
	color: red;
}

<nav class="daohanglan">
	<ul>
		<li>继承的权重为0</li>
	</ul>
</nav>

div {
	color: red !important;
}
/* :first-child == div[style] 权重一样的 */
* {
	color: blue;
}

<div style="color:blue">123</div>

权重是优先级的算法，层叠是优先级的表现

数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

继承的 权重是 0