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进行计算。主要是作用于继承，用于计算特殊的值 inherit和 initial。

应用值（used value）：

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

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

参考

MDN CSS层叠样式

CSS优先级计算规则

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