很早就听说通配选择器不好,最好不要使用,似乎使用场景只限于最简单的 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,% 单位的值自然就不会被继承了。
总结:
对于通用组件开发来说,组件需要嵌入到任何页面都能正常运行,而或多或少都会受到引入页面的样式影响,那么对继承与优先级的深入理解就变得至关重要了。