CSS 的语法有多种书写方式,元素、类、ID、行内,对于一个大型网站来说,如果CSS 不能通过命名规范和模块化的方式进行有序管理的话,后期维护是非常耗时和困难的,一个效果的改动可能会导致很多 CSS 的变更。由于书写方式的不同,CSS 中有自己定义的一套规则来确定那个 CSS 权重最高,权重最高的效果最终生效。
1.按顺序,如果同样的权重,同样的效果,例如背景色,后声明的会覆盖先声明的。
2.权重计算:CSS 通过 4 位二进制来计算权重。
- 行内元素最高权重(1,0,0,0)。
- ID 选择器其次(0,1,0,0)。
- 类、属性和伪类选择器为(0,0,1,0)。
- 元素和伪元素选择器最低(0,0,0,1)。
为了方便可以直接按 1000、100 这样计算,最终将数值加在一起,如下表
| 选择器 (Selector) | 特异性值 (Specificity Value) | 计算方法 (Calculation) |
|----------------|----------------------|-------------------|
|p
| 1 | 1 |
|p.test
| 11 | 1 + 10 |
|p#demo
| 101 | 1 + 100 |
|<p style="color: pink;">
| 1000 | 1000 |
|#demo
| 100 | 100 |
|.test
| 10 | 10 |
|p.test1.test2
| 21 | 1 + 10 + 10 |
|#navbar p#demo
| 201 | 100 + 1 + 100 |
|*
| 0 | 0 (通配符被忽略) |
对于引入多个外部样式文件的情况,计算方式与单个文件相同,例如
/* 文件 1: style1.css */
p {
color: red;
}
/* 文件 2: style2.css */
p {
color: blue;
}
如果这两个文件都引入到一个 HTML 中,并且 style2.css 在 style1.css 之后加载,则 p 将显示为蓝色,因为来自 style2.css 的 p 选择器由于顺序将优先于 style1.css,并且这两个选择器具有相同权重。
3.最后是 !important,important关键字是具有最高权重,在开发中慎用,会导致全局样式失效。