CSS优先级计算的规则

CSS的优先级计算规则（CSS specificity calculation）是用来决定在多个CSS规则中哪个具有更高的优先级的计算方式。以下是优先级计算的规则：

选择器分配的优先级值，每个选择器都有自己的优先级值。
- 对于一个选择器来说，ID选择器 的优先级最高，它的优先级值为100。
- 对于一个选择器来说，class选择器、 属性选择器 和 伪类 的优先级值为10。
- 对于一个选择器来说，标签选择器 和 伪元素 的优先级值为1。
- 所有选择器的优先级都小于任何具有 !important 声明的属性。
如果两个或多个选择器的优先级值相等，则可以根据下列规则判断哪个规则更具体并优先应用：
- 如果选择器中包含了一个ID选择器，则此选择器更具体。
- 如果选择器中包含了一个class选择器/属性选择器/伪类，则此选择器更具体。
- 如果选择器中包含了一个标签选择器/伪元素，则此选择器更具体。
- 如果选择器中包含了多个相同类型的选择器，则优先级相等，最内层的选择器最具体。
计算完所有选择器的优先级值之后，将所有选择器的优先级值加起来，得到它们的总优先级。
如果两个或多个规则的总优先级相等，则后面的规则将覆盖前面的规则。

以下是两个基于优先级计算的示例：

<!DOCTYPE html>
<html>
<head>
<style>
  /* 第一个选择器：ID选择器具有最高级别的优先级 */
  #first {
    color: red;
  }
  /* 第二个选择器：选择器中包含ID选择器, 2个class选择器及一个属性选择器，总优先级为122 */
  .second div#first.red.orange[type='submit'] {
    color: blue; 
  }
</style>
</head>
<body>
  <div id="first" class="red orange">First Text</div> 
  <div class="second">
    <div id="first" class="red orange">
      Second Text with blue color
    </div>
  </div>
</body>
</html>

根据上面的代码，第二个div元素将具有 Second Text with blue color 文本，因为 .second div#first.red.orange[type='submit'] 的优先级比 #first 更高。

<!DOCTYPE html>
<html>
<head>
<style>
  #id1 {
    color: red; 
  }
  .class1 {
    color: green; 
  }
  div {
    color: blue; 
  }
</style>
</head>
<body>
  <div id="id1" class="class1">Text</div>
</body>
</html>

在上例中，元素<div>的文本变为 blue，因为选择器 div 的优先级比 #id1 和 .class1 的优先级都低，所以先应用了 color: blue。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS优先级计算的规则 - Python技术站