优先级和继承
在项目过程中会发现一些样式没有生效，通常原因是你创建类两个规则同时对相同的元素生效，决定发生冲突的时候应该使用哪条规则由规则的优先级决定。
优先级
现在来看看浏览器如何计算优先级。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配（简单的说就是选择器范围越小权重越高）。
如果你有超过一条规则，而且都是相同的权重，那么最后面的规则会应用
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
- 千位： 如果声明在
style的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。 - 百位： 选择器中包含
ID选择器则该位得一分。 - 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
注: 通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。
!important
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
注： 覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级而且顺序靠后，或者更高优先级。
了解 !important 是为了在阅读别人代码的时候知道有什么作用。 但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
继承
一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
例如：
- 如果你设置一个元素的
color和font-family，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。 - 如果你在一个元素上设置
width 50%，所有的后代不会是父元素的宽度的50%。
控制继承
为了控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值:
inherit:设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为inheritunset:将属性重置为自然值，也就是如果属性是自然继承那么就是inherit，否则和initial一样
注: 还有一个新的属性revert，只有很少的浏览器支持。
为了避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。
