起因:
很早就听说通配选择器不好,最好不要使用,似乎使用场景只限于最简单的 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,% 单位的值自然就不会被继承了。
总结:
对于通用组件开发来说,组件需要嵌入到任何页面都能正常运行,而或多或少都会受到引入页面的样式影响,那么对继承与优先级的深入理解就变得至关重要了。
分享到:
相关推荐
css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高。例子1:CODE:<style type=text/css> <!– *{font-size:20px} .class3{ font-size: 12px; } –> </style...
概念浏览器是通过判断优先级,来决定到底哪些属性值是与元素最相关的,从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。 如何计算?优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个...
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。 当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖...
多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性(Specificity)盒子模型(CSS重点)看
CSS 高 级 特 性 CSS高级特性 所谓层叠性是指多种CSS样式...为了体验CSS优先级,首先来看一个具体的例子,其CSS样式代码如下: p{ color:red;} /*标记样式*/ .blue{ color:green;} /*class样式*/ #header{ color:blue;}
1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择...
CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。...- CSS特性(优先级,继承,层叠)。
主要介绍了CSS编写中的属性优先级问题,重点讲解了元素之间的层级计算以及继承关系,需要的朋友可以参考下
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
本文介绍了CSS中提升优先级属性!important的用法问题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
文章目录继承性继承性的使用说明CSS继承的局限性层叠性层叠性的使用说明使用结论优先级优先级的使用说明 CSS有三大特性,分别是 继承性,层叠性,优先级。CSS的主要特征是继承性,这里先讲解继承性。 继承性 继承性...
1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择...
1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择...
[第一章]什么是CSS-层叠样式表[第二章]简单的CSS层叠样式表的例子[第三章]使用不同的CSS写法-CSS进阶[第四章]混合使用三种插入方式的优先级和继承性问题[第五章]关于CSS中的类-CLASS[第六章]CSS对字体、字型的控制...
!important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用.!important提升优先级,下面对它的用法做下总结
第 3 章 CSS 基础与书写规范 第29 页 3.1 CSS 的基础知识 3.1.1 什么是CSS 3.1.2 CSS 的语法 3.1.3 选择符 3.1.4 属性 3.1.5 伪类和伪元素 3.1.6 默认值 3.1.7 继承性 3.2 CSS 编码规范 3.2.1 CSS 基本书写规范 ...
样式继承,优先级,最高层级!important; css字体样式:font-family设置字体系列,font-size设置字体大小,font-weight设置字体粗细,font-style设置字体样式,color设置字体颜色的三种形式,font的简写; css文本...
1 ...1.1. HTML与CSS的关系 4 ...9. CSS3的继承、优先级&重要性 29 10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29
HTML&CSS;学习7的源码 包含样式的继承,选择器的优先级,伪类的顺序三个部分的内容
Css选择器 _样式的继承 _样式的优先级 _两个关键属性 _块标记和行内标记 _一些常见的属性 _【案例】仿当当网首页;