CSS 优先级点数是如何计算的?

cssweb developmentfront end technology更新于 2024/6/2 22:36:17

CSS 优先级是一种根据点数区分或优先处理不同 CSS 选择器的过程，优先级点数最高的选择器将获胜，并且该选择器的 CSS 样式将应用于元素。

下表显示了每个 CSS 选择器的点数层次及其优先级 -

序号	CSS 选择器	优先级点数
1	Element Selector	1
2	Class Selector	10
3	ID Selector	100
4	Inline CSS	1000
5	Element + Class Selector	1 + 10 = 11
6	Element + ID Selector	1 + 100 = 101

用例 - 假设您有一个带有 Class 和 ID 的元素，并且您尝试使用类和 ID 选择器为其提供 CSS。此时，它将分配使用 ID 选择器定义的 CSS 样式，因为 ID 选择器的权重比 Class 选择器高 10 倍。

现在让我们借助代码示例详细了解这些选择器及其优先级之间的区别。

步骤

步骤 1 − 第一步，我们将定义一个带有 class 和 ID 属性的 HTML 元素。
步骤 2 − 在此步骤中，我们将通过使用 CSS 选择器选择元素并检查其优先级来为其编写 CSS。

示例

以下示例将说明不同 CSS 选择器及其优先级之间的区别 −

<html>
<head>
   <style>
      /* 主 Div 的 CSS 使用 Class = 10 点和 ID = 100 点选择器 */
      #IdDemo {
         background-color: #84abb5;
         color: white;
         height: 150px;
         text-align: center;
      }
      .classDemo {
         background-color: green;
         color: white;
         height: 400px;
         text-align: end;
      }
      /* 标题样式仅显示类 = 10 点和元素 + 类选择器 = 11 点之间的差异 */
      h2.demoH2Class {
         color: #e6d4b6;
         background-color: #414141;
      }
      .demoH2Class {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>

在上面的例子中，我们通过两个不同的选择器选中了同一个元素，并在同一个元素上使用了相同的 CSS 属性，我们可以清楚地看到，优先级更高的选择器的 CSS 被应用到了该元素上。

示例 2

下面的示例将解释其他一些 CSS 选择器在优先级方面的区别 -

<html>
<head>
   <style>
      /* 主 Div 的 CSS 使用元素 + ID = 101 点选择器 */
      div#IdDemo {
         background-color: green;
         color: blue;
         height: 250px;
         text-align: start;
      }
      /* 标题样式仅显示 ID = 100 点和元素 + ID = 101 点选择器之间的差异 */
      h2#demoH2ID {
         color: #e6d4b6;
         background-color: #414141;
      }
      #demoH2ID {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
   <!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
   <div id = "IdDemo" class = "classDemo"
      style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
      <h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
   </div>
</body>
</html>

在上面的示例中，我们再次在不同的 CSS 选择器中使用了相同的 CSS 属性，但值有所不同。对于主 div 元素，我们使用了内联选择器和 ID 选择器来应用 CSS，但由于内联选择器的优先级远高于 ID 选择器，因此内联 CSS 会被应用于元素。而对于 h2 标题，我们使用了 ID 选择器和元素 + ID 选择器，由于后一个选择器的 CSS 权重值更多，因此元素 + ID 选择器的 CSS 会被应用于元素。