岩石教程

CSS选择器权重计算规则

2024-07-19 17:10:14 228
CSS选择器的权重（Specificity）决定了当多个选择器作用于同一个元素时，哪一个选择器的样式会生效。权重是根据选择器的组成部分计算出来的。CSS权重的计算规则如下：

权重计算规则

CSS权重由四个部分组成，优先级从左到右依次是：

  1. 内联样式（inline styles）
  2. ID选择器
  3. 类选择器、属性选择器和伪类选择器
  4. 元素选择器和伪元素选择器

每个部分的权重按以下方式计算：

  • 内联样式：加 1,0,0,0
  • ID选择器：每个ID选择器加 0,1,0,0
  • 类选择器、属性选择器和伪类选择器：每个加 0,0,1,0
  • 元素选择器和伪元素选择器：每个加 0,0,0,1

权重值由四个部分组成，从左到右每部分的数值依次高于后面的部分。

例子

  • 内联样式：style="color: red;" => 1,0,0,0
  • ID选择器：#header => 0,1,0,0
  • 类选择器：.menu => 0,0,1,0
  • 属性选择器：[type="text"] => 0,0,1,0
  • 伪类选择器：:hover => 0,0,1,0
  • 元素选择器：div => 0,0,0,1
  • 伪元素选择器：::before => 0,0,0,1

具体权重计算示例

假设有以下选择器：

  1. div => 0,0,0,1
  2. .menu => 0,0,1,0
  3. #header => 0,1,0,0
  4. div.menu => 0,0,1,1
  5. div#header .menu => 0,1,1,1
  6. a:hover => 0,0,2,1
  7. div a:hover => 0,0,2,2
  8. div > p => 0,0,0,2
  9. [type="text"] => 0,0,1,0
  10. div[type="text"] => 0,0,1,1
  11. div[type="text"]:hover => 0,0,2,1

权重比较

权重的比较是从左到右逐级比较的，较高位的数字决定权重的大小。例如：

  • div (0,0,0,1) 和 .menu (0,0,1,0) 比较，.menu 的权重更大。
  • #header (0,1,0,0) 和 .menu (0,0,1,0) 比较，#header 的权重更大。
  • div#header .menu (0,1,1,1) 和 a:hover (0,0,2,1) 比较，div#header .menu 的权重更大。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Specificity</title>
  <style>
    div { color: blue; } /* 权重 0,0,0,1 */
    .menu { color: green; } /* 权重 0,0,1,0 */
    #header { color: red; } /* 权重 0,1,0,0 */
    div.menu { color: purple; } /* 权重 0,0,1,1 */
    div#header .menu { color: orange; } /* 权重 0,1,1,1 */
  </style>
</head>
<body>
  <div id="header" class="menu">Hello World</div>
</body>
</html>

在这个例子中，div#header .menu 的权重最大，因此文本 "Hello World" 将被渲染为橙色。

重要性（!important）

除了权重，!important 声明也会影响样式的应用。带有 !important 的样式将优先于其他样式，但在比较多个 !important 时，仍然需要比较权重。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Specificity with !important</title>
  <style>
    div { color: blue !important; } /* 权重 0,0,0,1 + !important */
    .menu { color: green; } /* 权重 0,0,1,0 */
    #header { color: red; } /* 权重 0,1,0,0 */
    div.menu { color: purple; } /* 权重 0,0,1,1 */
    div#header .menu { color: orange; } /* 权重 0,1,1,1 */
  </style>
</head>
<body>
  <div id="header" class="menu">Hello World</div>
</body>
</html>

在这个例子中，尽管 div#header .menu 的权重最大，但由于 div { color: blue !important; } 带有 !important 声明，因此文本 "Hello World" 将被渲染为蓝色。

总结

  • 权重计算通过四部分的加和来进行：内联样式、ID选择器、类/属性/伪类选择器、元素/伪元素选择器。
  • !important 声明优先于所有权重，但多个 !important 声明之间仍需比较权重。
  • 理解和掌握CSS权重计算规则对于解决样式冲突和调试CSS至关重要。