CSS优先级算法如何计算？有哪些判定规定及计算方式

CSS优先级算法是用于确定在多个CSS规则应用于同一元素时，哪个规则将具有最高优先级的算法。以下是一个详细的攻略，介绍了CSS优先级算法的计算方式和判定规定，包括两个示例说明：

1. CSS优先级算法的计算方式

CSS优先级算法是基于四个级别的规则计算的，这些级别按照以下顺序排列：

1. 内联样式（在元素的style属性中指定的样式）
2. ID选择器（#id）
3. 类选择器、属性选择器和伪类选择器（.class、[attribute]、:hover等）
4. 标签选择器和伪元素选择器（div、p、:before等）

在计算优先级时，每个级别都有一个基数，内联样式的基数为1000，ID选择器的基数为100，类选择器、属性选择器和伪类选择器的基数为10，标签选择器和伪元素选择器的基数为1。然后，将每个选择器的基数相加，以确定其优先级。例如，具有以下规则的元素：

p {
  color: red;
}

#my-id {
  color: blue;
}

.my-class {
  color: green;
}

其中，标签选择器p的基数为1，ID选择器#my-id的基数为100，类选择器.my-class的基数为10。因此，ID选择器#my-id的优先级最高，其次是类选择器.my-class，最后是标签选择器p。如果存在多个具有相同优先级的规则，则最后一个规则将具有优先权。

2. CSS优先级算法的判定规定

在计算CSS优先级时，还有一些判定规定需要遵循。以下是一些常见的判定规定：

• 选择器中包含的ID选择器的数量越多，优先级越高。
• 选择器中包含的类选择器、属性选择器和伪类选择器的数量越多，优先级越高。
• 选择器中包含的标签选择器和伪元素选择器的数量越多，优先级越低。
• 如果两个规则具有相同的优先级，则最后一个规则将具有优先权。

3. 示例说明

在CSS优先级算法中，我们介绍了计算方式和判定规定。例如，对于以下规则：

p {
  color: red;
}

p#my-id {
  color: blue;
}

p.my-class {
  color: green;
}

其中，标签选择器p的基数为1，ID选择器#my-id的基数为100，类选择器.my-class的基数为10。因此，ID选择器#my-id的优先级最高，其次是类选择器.my-class，最后是标签选择器p。因此，对于以下HTML元素：

<p id="my-id" class="my-class">Hello, world!</p>

其文本颜色将为蓝色，因为ID选择器#my-id的优先级最高。

另一个示例是，对于以下规则：

p {
  color: red;
}

div p {
  color: blue;
}

其中，标签选择器p的基数为1，标签选择器div的基数为1。因此，两个规则具有相同的优先级。对于以下HTML元素：

<div>
  <p>Hello, world!</p>
</div>

其文本颜色将为蓝色，因为最后一个规则具有优先权。

总结

CSS优先级算法是用于确定在多个CSS规则应用于同一元素时，哪个规则将具有最高优先级的算法。在计算优先级时，每个级别都有一个基数，内联样式的基数为1000，ID选择器的基数为100，类选择器、属性选择器和伪类选择器的基数为10，标签选择器和伪元素选择器的基数为1。在判定规定方面，选择器中包含的ID选择器的数量越多，优先级越高。选择器中包含的类选择器、属性选择器和伪类选择器的数量越多，优先级越高。选择器中包含的标签选择器和伪元素选择器的数量越多，优先级越低。如果两个规则具有相同的优先级，则最后一个规则将具有优先权。