目标

学习层叠，优先级，以及css继承是如何工作的

css 层叠样式表

1 .某些时候发现一个项目中一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则，样式之间产生了冲突
2 .也有可能是继承的原因， 默认情况下，一些css属性继承当前父元素上设置的值，有些不继承。这就导致了一些和期望不同的结果

层叠

1 .css规则的顺序很重要，当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则
2 .重要程序
3 .优先级
4 .资源顺序

1 .如果权重相同，那么后面的而样式被使用，可以理解为后面的覆盖前面的样式

优先级

1 .浏览器是根据优先级来决定当前规则有不同选择器对应相同的元素的时候需要使用哪个规则。
2 .千位:如果声明在style的属性则该位得一分。这样的声明没有选择器，所以总得分是1000
3 .百位:选择器中包含id则该位的一分
4 .十位:选择器中包含类选择器，属性选择器，伪类，该位的一分
5 .个位:选择器中包含元素，伪元素选择器，该位得一分。
6 .一个选择器的优先级是由上面4个部分相加。在运算时不允许进位，也就是说，20个类选择器仅仅是20个十位，而不会变成2个百位，也就是无论多少个类选择器相叠加，最后的值都不会超过一个id选择器
7 .通用选择器*，组合符+，>,~，‘’和否定伪类:not不会影响优先级
8 .!important:用于修改特定属性的值，可以覆盖普通规则的层叠。也就上面加完之后来这里都不行，以这个为准。这里看上去好像是一个修bug的操作，还是不要用好了（当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它）

1 .覆盖!important唯一的办法就是另一个!important具有相同的优先级而且在他顺序后面，或者更高的优先级
2 .

继承

1 .继承关系需要在上下文中去理解-有些设置在父元素上的css属性是可以被子元素继承的，有些则不能，比如color,font-family。
2 .哪些属性属于默认继承很大程度上竟然是由“常识”决定的.
3 .属性值

1 .inherit:该属性值会使子元素属性和父元素相同。实际上就是开启继承
2 .initial:和浏览器默认样式相同。如果浏览器默认样式中设置且该属性是自然继承的，那么会设置为inherit
3 .unset:属性设置为自然值，也就是如果属性是自然继承那么就是inherit,否则就是initial

4 .all属性，值也是上面的三个，这里设置就相当于对对所有css属性使用这个属性

上面这三个概念是协同工作的