CSS总结篇(一)

本篇主要总结CSS的优先级,权重计算策略及层叠

CSS三大特性:

  • 继承:即子类元素继承父类元素
  • 优先级:是指不同类别样式的权重比较
  • 层叠:是指当css样式的权重值相同时,后者覆盖前者的样式

css规则由选择器(html标签元素)和声明块(一组属性集合)组成,写在选择器后面大括号里的就叫声明。

CSS优先级:

优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

对于html元素应用到两个或者多个css声明,css有一套优先级的规则,根据CSS优先级的规则,选择一个符合CSS规则的CSS样式。

CSS选择器优先级(级别是逐级递增):

  1. 浏览器自定义或继承
  2. 通配符选择器
  3. 标签选择器
  4. 类选择器
  5. id选择器
  6. 内联样式
  7. 在某一元素的css属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

排序规则: !important > 内联样式 > id选择器 > 类选择器(属性选择器,伪类) > 标签选择器(伪元素) > 通配符选择器 > 继承 > 浏览器默认的属性

CSS优先级计算规则:
  1. 计算CSS样式权值规则:

    内联样式的权值最高为1000;id选择器的权值为100;类选择器的权值为10;html标签选择器的权值为1。

  2. 由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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--css样式-->
<style>
#parent{
color:#888;/* 权值100 */
}
.parent{
color:red;/* 权值10 */
}
div.parent{
color:#999;/* 权值11 */
}
.child{
color:#333;/* 权值10 */
}
.parent p {
color:blue;/* 权值11 */
}
.parent .child {
color:gold;/* 权值20 */
}
#parent .child {
color:green;/* 权值110 */
}
</style>

<!--主体元素-->
<div id="parent" class="parent">
CSS层级
<p class="child">
CSS层级1
</p>
</div>

CSS层叠:

多重样式(Multiple Styles

如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

一般情况下,优先级为:(外部样式)External style sheet **<**(内部样式)Internal style sheet **<**(内联样式)Inline style

有个例外的情况,就是如果外部样式放在内部样式后面,则外部样式将覆盖内部样式。

外部样式:

1
<link rel="stylesheet" href="style.css" type="text/css">

内部样式:

1
2
3
4
5
<style>
#parent{
color:#888;/* 权值100 */
}
</style>

内联样式:

1
<div id="parent" class="parent" style="color:green"></div>

同一个元素应用到多个样式

css先判断规则是否含有!important,有则优先级是最高的;当没有,就比较规则的权值,根据CSS优先级的计算规则决定哪个规则起作用;当权值也一样的时候,css规则会按顺序排序,后声明的规则优先级高。

Css计算规则策略:
指定值(specified value):

通过下面3种途径取得:

  1. 如果给这个属性赋值了,会被优先使用。
  2. 如果没有给这个属性赋值,那么就会从父元素那继承一个值。
  3. 如果上面的两种途径都不可行,则把CSS规范中针对这个元素的这个属性的初始值作为指定值。
计算值(computed value):

该值是以指定值根据规范定义的行为进行计算,通常将相对值计算为绝对值,例如em根据font-size进行计算。主要是作用于继承,用于计算特殊的值 inheritinitial

应用值(used value):

CSS 属性的应用值(used value)是完成所有计算后最终使用的值,可以由 window.getComputedStyle 获取。

计算出CSS属性的最终值有三个步骤。首先,指定值(specified value) 取自样式层叠 (选取样式表里权重最高的规则), 继承(如果属性可以继承则取父元素的值),或者默认值。然后,按规范算出计算值(computed value)(例如, span 指定 position: absolutedisplay 变为 block)。最后,计算布局(尺寸比如 auto 或 百分数 换算为像素值 ), 结果即 应用值used value。这些步骤是在内部完成的,脚本只能使用window.getComputedStyle 获得最终的应用值。

参考

MDN CSS层叠样式

CSS优先级计算规则

主流浏览器css兼容问题的总结


本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。

本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。