CSS总结篇(一)
本篇主要总结CSS
的优先级,权重计算策略及层叠
CSS三大特性:
- 继承:即子类元素继承父类元素
- 优先级:是指不同类别样式的权重比较
- 层叠:是指当css样式的权重值相同时,后者覆盖前者的样式
css
规则由选择器(html标签元素)和声明块(一组属性集合)组成,写在选择器后面大括号里的就叫声明。
CSS优先级:
优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
对于html元素应用到两个或者多个css
声明,css有一套优先级的规则,根据CSS优先级的规则,选择一个符合CSS规则的CSS样式。
CSS选择器优先级(级别是逐级递增):
- 浏览器自定义或继承
- 通配符选择器
- 标签选择器
- 类选择器
- id选择器
- 内联样式
- 在某一元素的css属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
排序规则: !important > 内联样式 > id选择器 > 类选择器(属性选择器,伪类) > 标签选择器(伪元素) > 通配符选择器 > 继承 > 浏览器默认的属性
CSS优先级计算规则:
计算CSS样式权值规则:
内联样式的权值最高为1000;id选择器的权值为100;类选择器的权值为10;html标签选择器的权值为1。
由CSS选择器的次数来决定CSS样式层叠:
每个CSS规则初始化对应一个“四位数”: 0 、0、0、0;
若是内联样式,则加1、0、0、0;
若是 ID选择符,则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0
若是 元素选择符/伪元素选择符,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。
1 | <!--css样式--> |
CSS层叠:
多重样式(Multiple Styles
)
如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。
一般情况下,优先级为:(外部样式)External style sheet
**<**(内部样式)Internal style sheet
**<**(内联样式)Inline style
有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
外部样式:
1 | <link rel="stylesheet" href="style.css" type="text/css"> |
内部样式:
1 | <style> |
内联样式:
1 | <div id="parent" class="parent" style="color:green"></div> |
同一个元素应用到多个样式
css先判断规则是否含有!important,有则优先级是最高的;当没有,就比较规则的权值,根据CSS优先级的计算规则决定哪个规则起作用;当权值也一样的时候,css规则会按顺序排序,后声明的规则优先级高。
Css计算规则策略:
指定值(specified value):
通过下面3种途径取得:
- 如果给这个属性赋值了,会被优先使用。
- 如果没有给这个属性赋值,那么就会从父元素那继承一个值。
- 如果上面的两种途径都不可行,则把CSS规范中针对这个元素的这个属性的初始值作为指定值。
计算值(computed value):
该值是以指定值根据规范定义的行为进行计算,通常将相对值计算为绝对值,例如em根据font-size进行计算。主要是作用于继承,用于计算特殊的值 inherit
和 initial
。
应用值(used value):
CSS 属性的应用值(used value)是完成所有计算后最终使用的值,可以由 window.getComputedStyle 获取。
计算出CSS属性的最终值有三个步骤。首先,指定值(specified value) 取自样式层叠 (选取样式表里权重最高的规则), 继承(如果属性可以继承则取父元素的值),或者默认值。然后,按规范算出计算值(computed value)(例如, span
指定 position: absolute
后display
变为 block
)。最后,计算布局(尺寸比如 auto
或 百分数 换算为像素值 ), 结果即 应用值used value。这些步骤是在内部完成的,脚本只能使用window.getComputedStyle 获得最终的应用值。
参考
本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。
本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。