css的优先级与继承

起因：

很早就听说通配选择器不好，最好不要使用，似乎使用场景只限于最简单的 css reset ：

 

* {
   margin:0;
   padding:0; 
}

 

直到偶尔看到 这篇文章 对规范深入浅出的分析才似乎有点理解了。

规范 ：

首先从层叠（cascade）说起，

 

css 的来源通常有三种：

1.浏览器 user agent 自带

2.程序员 （author）指定

3.用户（user）在浏览器中自己设定

由于可以通过指定 ！import （这个也是最好别用的 ）强制越过等级，w3 平衡了用户与程序员的权利，实际上的优先级层次为：

1.浏览器 user agent 自带

2.用户（user）在浏览器中自己设定

3.程序员 （author）指定

4.程序员 （author）指定 !import

5.用户（user）在浏览器中自己指定 !important。

然后就是特殊性（specificity）的规定：

由于在每个等级都可能会出现同一个元素被多个css规则影响，那么最终采用哪个规则就取决于哪个规则最特殊，优先级最高。每条规则的优先级根据其 css 选择器来指定，从高到底进行比较如下（任意一层高则整体就高）

1.行内样式最高

2.选择器中 id 的个数，多者优先

3.选择器中 类，属性，伪类（last-child）的个数，多 者 优先

4.选择器中元素，伪元素的个数，多 者 优先

5.规则在文档中的出现顺序，后者优先

最后就是继承（inheritance）的作用了

若某个元素没有一条规则（程序员或用户）能够直接匹配到自己，那么根据 相应的css属性定义决定 是否可以继承，

1.可以继承，继承其父元素的对应计算值（computed value） 。

2.不可以继承，则应用浏览器（user agent）的默认值。

其中特别要注意的是继承的是计算值（computed value）而不是用户或程序员的指定值（specified value）。而关于指定值和计算值的转换关系，则每个css属性都有对应的定义 。

例子：

1.解释开头提出的问题，为什么最好不要使用 *

主要原因即是使用了 * ，继承这一机制就完全失效了，由于 * 可以匹配任何元素，那么就不存在需要继承的css属性了，而继承很多时候是顺其自然，是合适的，例如：

 

* {font-size:12px;}

p {font-size:18px;}


<p>
    i am   
    <strong>strong</strong>
    !
</p>

 

本意是通过 * 来设定整体的字体大小，但是如果想在某个段落应用大字体，并着重其中的某个字strong，由于 strong 以及被 * 匹配，则不能继承父元素的 p 的字体大小，造成怪异的效果，这也是禁止这么使用的原因。

而之所以

 

* {
margin:0;
padding:0;
}

 

没有明令禁止，主要原因还是本身margin，padding其实是定义成不可继承的 ，而本身边距的继承也毫无意义。

2.继承 line-height

以前也有过讨论：两个细节小问题 ，

其中 line-height 部分解释也有点模糊，真正原因有两点

1. line-height 属性是可继承的，和字体等属性类似，为了保证整块区域的和谐，继承还是必要的。

2.继承的是计算值（computed value），line-height 有四种指定值：

  2.1 : normal（关键字），浏览器指定为number 1.0 - 1.2 之间，同number效果相同

  2.2 : number（数字），计算值等于指定值

  2.3 : length（带单位数值），计算机等于绝对值（absolute value），即px单元的值

  2.4 : percentage（百分比），计算值等于字体大小*该指定值

由于继承的是计算值，那么在父元素上指定 em,ex,% 单位的值自然就不会被继承了。

 

 

总结：

对于通用组件开发来说，组件需要嵌入到任何页面都能正常运行，而或多或少都会受到引入页面的样式影响，那么对继承与优先级的深入理解就变得至关重要了。