CSS优先级与继承
2015-08-01 18:54
561 查看
很早就听说通配选择器不好,最好不要使用,似乎使用场景只限于最简单的 css reset :
Html代码
* {
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
10538
-child)的个数,多 者 优先
4.选择器中元素,伪元素的个数,多 者 优先
5.规则在文档中的出现顺序,后者优先
最后就是继承(inheritance)的作用了
若某个元素没有一条规则(程序员或用户)能够直接匹配到自己,那么根据 相应的css属性定义决定 是否可以继承,
1.可以继承,继承其父元素的对应计算值(computed value) 。
2.不可以继承,则应用浏览器(user agent)的默认值。
其中特别要注意的是继承的是计算值(computed value)而不是用户或程序员的指定值(specified value)。而关于指定值和计算值的转换关系,则每个css属性都有对应的定义 。
例子:
1.解释开头提出的问题,为什么最好不要使用 *
主要原因即是使用了 * ,继承这一机制就完全失效了,由于 * 可以匹配任何元素,那么就不存在需要继承的css属性了,而继承很多时候是顺其自然,是合适的,例如:
Html代码
* {font-size:12px;}
p {font-size:18px;}
<p>
i am
<strong>strong</strong>
!
</p>
本意是通过 * 来设定整体的字体大小,但是如果想在某个段落应用大字体,并着重其中的某个字strong,由于 strong 以及被 * 匹配,则不能继承父元素的 p 的字体大小,造成怪异的效果,这也是禁止这么使用的原因。
而之所以
Html代码
* {
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,% 单位的值自然就不会被继承了。
总结:
对于通用组件开发来说,组件需要嵌入到任何页面都能正常运行,而或多或少都会受到引入页面的样式影响,那么对继承与优先级的深入理解就变得至关重要了。
Html代码
* {
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
10538
-child)的个数,多 者 优先
4.选择器中元素,伪元素的个数,多 者 优先
5.规则在文档中的出现顺序,后者优先
最后就是继承(inheritance)的作用了
若某个元素没有一条规则(程序员或用户)能够直接匹配到自己,那么根据 相应的css属性定义决定 是否可以继承,
1.可以继承,继承其父元素的对应计算值(computed value) 。
2.不可以继承,则应用浏览器(user agent)的默认值。
其中特别要注意的是继承的是计算值(computed value)而不是用户或程序员的指定值(specified value)。而关于指定值和计算值的转换关系,则每个css属性都有对应的定义 。
例子:
1.解释开头提出的问题,为什么最好不要使用 *
主要原因即是使用了 * ,继承这一机制就完全失效了,由于 * 可以匹配任何元素,那么就不存在需要继承的css属性了,而继承很多时候是顺其自然,是合适的,例如:
Html代码
* {font-size:12px;}
p {font-size:18px;}
<p>
i am
<strong>strong</strong>
!
</p>
本意是通过 * 来设定整体的字体大小,但是如果想在某个段落应用大字体,并着重其中的某个字strong,由于 strong 以及被 * 匹配,则不能继承父元素的 p 的字体大小,造成怪异的效果,这也是禁止这么使用的原因。
而之所以
Html代码
* {
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,% 单位的值自然就不会被继承了。
总结:
对于通用组件开发来说,组件需要嵌入到任何页面都能正常运行,而或多或少都会受到引入页面的样式影响,那么对继承与优先级的深入理解就变得至关重要了。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题
- 用css filter做鼠标滑过图片效果