CSS进阶篇——具体性 (specificity)
Posted feelang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS进阶篇——具体性 (specificity)相关的知识,希望对你有一定的参考价值。
如果同一个 html 元素上有多个 CSS 规则,当它们互相冲突时,浏览器会遵循一定的规则来找到最具体的那条规则,并舍弃与之冲突的其它规则。
这个功能在 CSS 比较少的情况下,用处不大,因为几乎不会有冲突。但随着 CSS 越来越复杂,文件越来越多,发生冲突的可能性就会变大,这个功能就会变得很重要。
更具体 = 更高优先级
同样的选择器,定义在后面的优先级更高:
p color: red
p color: blue
浏览器最终会选择第二个选择器,也就是 <p>
元素内的文本会为绿色。
但是上面这种写法并不常见,因为没有人会定义两个一样的选择器。这类冲突更多发生在嵌套选择器中:
div p color: red
p color: blue
如果按照选择器定义的顺序来看优先级,上例中 <div>
中 <p>
元素的文本颜色一定为绿色,但实际上并非如此。
因为浏览器是按照具体性(也叫特异性,specificity)来确定优先级,选择器越具体,它的优先级就越高。
具体性的计算方式
浏览为每一种选择器定义了一个权重:
- ID 选择器是 100
- 类选择器是 10
- HTML 选择器是 1
把 HTML 元素上 CSS 的权重加起来就是它的具体值:
选择器 | 具体值 | 计算方式 |
---|---|---|
p | 1 | 1 个 HTML 选择器 |
div p | 2 | 2 个 HTML 选择器 |
.tree | 10 | 1 个类选择器 |
div p.tree | 12 | 2 个 HTML 选择器 + 1 个类选择器,1+1+10 |
#baobab | 100 | 1 个类选择器 |
body #content .alternative p | 112 | 1 个 HTML 选择器 + 1 个 ID 选择器 + 1 个类选择器 + 1 个 HTML 选择器,1+100+10+1) |
所以,优先级会先看具体值,再看排序。
以上是关于CSS进阶篇——具体性 (specificity)的主要内容,如果未能解决你的问题,请参考以下文章