css层叠、优先级和继承

层叠

当声明冲突时，层叠会依据三种条件解决冲突。
(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
(2) 选择器优先级：哪些选择器比另外一些选择器更重要。
(3) 源码顺序：样式在样式表里的声明顺序。

选择器优先级规则

❑若是选择器的ID数量更多，则它会胜出（即它更明确）。
❑ 若是ID数量一致，那么拥有最多类的选择器胜出。
❑ 若是以上两次比较都一致，那么拥有最多标签名的选择器胜出。

伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。

两条经验法则

(1) 在选择器中不要使用ID。就算只用一个ID，也会大幅提高优先级。当须要覆盖这个选择器时，一般找不到另外一个有意义的ID，因而就会复制原来的选择器，而后加上另外一个类，让它区别于想要覆盖的选择器。
(2) 不要使用！important。它比ID更难覆盖，一旦用了它，想要覆盖原先的声明，就须要再加上一个！important，并且依然要处理优先级的问题。

继承

若是一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。
但不是全部的属性都能被继承。默认状况下，只有特定的一些属性能被继承，一般是咱们但愿被继承的那些。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。还有一些其余的属性也能够被继承，好比列表属性：list-style、list-style-type、list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing也能被继承。

继承属性会顺序传递给后代元素，直到它被层叠值覆盖。

特殊值

使用inherit关键字

用inherit关键字。能够用它来覆盖另外一个值，这样该元素就会继承其父元素的值。

使用initial关键字

当一个属性没有层叠值且不是继承属性时就会使用属性的初始值，固然咱们也能够设置initial关键字来显式使用初始值。css每一个属性都有初始值，它和浏览器相关，不一样浏览器可能会有差别，可是要记住它不属于浏览器默认样式表（用户代理表）

简写属性

不少属性均可以简写，如font,background,margin,padding等。
大多数简写属性能够省略一些值，只指定咱们关注的值。可是要知道，这样作仍然会设置省略的值，即它们会被隐式地设置为初始值(不是继承值)。这会默默覆盖在其余地方定义的样式。