CSS三大特性简介
CSS（层叠样式表）三大特性：层叠性、继承性、优先级。
一、CSS层叠性
所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上面，那么这时候一个属性就会将另一个属性层叠掉。
比如先给某个标签指定了内部文字颜色会红色，接着又指定了颜色为蓝色，那么此时出现了一个标签指定了相同样式的不同值的情况，这类情况我们就称之为样式冲突。
一般情况下，如果出现了样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
1、样式冲突，遵循的原则就是就近原则，哪个样式离着结构近，就执行哪个样式；2、样式不冲突，则不会层叠；
【样例代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三大特性-层叠性</title><style>div {color: blue;font-size: 25px;}div {color: grey;}</style></head><body><div>三大特性-层叠性</div></body></html>
二、CSS继承性
所谓的继承性是指书写CSS样式表的时候，子标签会继承父标签的某些样式（不是全部，一般来说是跟文字相关的属性）。如文本颜色和字号，想要设置一个可继承的属性，只需要将它应用于父元素即可。
恰当的使用继承可以简化代码，降低CSS样式的复杂性，子元素可以继承父元素的样式属性有text-，font-，line-，color等这些元素。
【样例代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三大特性-继承性</title><style>.baba {color: blue; font-size: 50px;}</style></head><body><div class="baba"><p>三大特性-继承性</p></div></body></html>
三、CSS优先级
定义CSS样式的时候，经常会出现两个或者多个规则应用在同一个元素上面的情况，这时就会出现优先级的问题，这个时候会引出“权重”的概念。
继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重有多大，被子元素继承时，它的权重都是0，也就是说子元素定义的样式会覆盖继承过来的样式；行内样式优先，应用style属性的元素，其行内样式的权重非常高；权重相同的时候，CSS遵循的就是上面说的就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式具有最大的优先级；CSS中还定义了一个！important命令，该命令被赋予了最大的优先级，也就是说不管权重如何以及样式的位置远近，它的优先级最大。
总结一下权重的知识点：
【样例代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三大特性-优先级</title><style>.baba { /* 权重 0,0,1,0 */color: blue; }div { /* 权重 0,0,0,1 */color: red;}#yeye { /* 权重 0,1,0,0 */color: pink;}div { /* 权重 ∞ */color: hotpink!important;}* { /* 权重 0,0,0,0 */color: grey;}/* 行内权重 1,0,0,0 */</style></head><body> <div class="baba" id="yeye" style="color: yellow">三大特性-优先级</div></body></html>
尤其需要注意的是，权重是可以叠加的。
比如下面的例子：
数位之间没有进制，比如说：0,0,0,5+0,0,0,5 = 0,0,0,10（而不是0,0,1,0）；
再者需要特别注意的是：继承的权重是0；
【样例代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>继承权重为0</title><style>.baba {color: blue!important;}p {color: red;}</style></head><body><div class="baba"><p>继承的权重为0</p></div></body></html>
