第3章特指度和层叠

不管怎样,无论问题看上去多抽象,多难懂,都要不断努力!努力终有回报.

其实在看技术书的时候,学到的不仅仅是这样技术.学到的也有里面的一些话术风格,文章编排思路,里面提到的相关其他技术资源,以及工作中的方法论

3.1 特指度

当多个规则的CSS声明冲突时,就会应用特指度高的声明.

一个特指度值由4部分组成,例如0,0,0,0

style属性值加 1,0,0,0
ID属性值加0,1,0,0
类属性值,属性选择或者伪类加0,0,1,0
元素,伪元素加0,0,0,1
连接符和通配符不加特指度

特指度从左向右比较,1,0,0,0 大于 0,0,0,19

惭愧,这么久了居然不知道特指度这个东西,一直只知道css冲突后有权重区分,除了 !important > style > id > class > 元素外,到底怎么区分却一直也不晓得

3.1.1 声明和特指度

浏览器会把群组选择符分开
再把规则打散成单独的声明
选择符的特指度确定后,将值赋于每个声明

h1, p.red { color: red; font-size: 12px; }

会转换成(可参照chomre调试工具的style面板)

h1 { color: red; }
h1 { font-size: 12px; }
p.red { color: red; }
p.red { font-size: 12px; }

3.1.2 通用选择符的特指度

通用选择符的特指度是0,0,0,0,其值大于没有特指度的声明,如下3个:

连接符没有特指度
继承的属性
外部样式,如font里面的一些声明

3.1.3 ID和属性选择符的特指度

#test { color: red; }  // => 0,1,0,0
[id="test"] { color: red; } // => 0,0,1,0

3.1.4 行内样式的特指度

<a style="color:red"> // => 1,0,0,0

3.1.5 重要性

!important

和特指度不是同一个阶层,冲突时直接选有重要性标志的
对特指度没有影响
必须放在声明最后分号之前

3.2 继承

很多属性是不继承的

边框
多数盒模型属性如:margin padding background等

3.3 层叠

层叠的规则如下:

找到元素的所有规则
应用!important声明
按来源(程序员,用户,浏览器)应用
按特指度应用
按声明顺序

3.3.1 按权重和来源排序

有!important的就选!important的
然后看来源
1. 用户样式中有!important的
2. 程序员中有!important的
3. 程序员写的其他样式
4. 用户样式中的其他样式
5. 浏览器的默认声明

3.3.2 按特指度排序

前面一样,如果再冲突,就看特指度了

3.3.3 按前后位置排序

特指度一样,就看顺序了
链接的那个声明顺序最能说明问题,考虑下为什么不这样排?

a:active
a:focus
a:hover
a:link
a:visited

3.3.4 CSS之外的表现提示

好像只出现在字体相关设置里面,这个估计用不上

学习笔记 CSS权威指南 第3章 特指度和层叠

第3章 特指度和层叠