css优先级计算方法(推荐)

CSS优先级计算方法

CSS优先级指的是浏览器根据CSS选择器的权重来决定采用哪个CSS样式规则。CSS优先级的计算方法是根据选择器的不同类型和数量来确定的。

基本规则

在计算CSS优先级时，可以使用四个级别的选择器类型：

1. 元素选择器和伪元素选择器。
2. 类选择器、伪类选择器和属性选择器。
3. ID选择器。
4. 内联样式（直接在HTML元素中使用style属性设置的样式）。

以下规则适用于计算CSS优先级：

• 如果存在!important标记，则直接采用其样式，不再计算优先级。
• 对于每个选择器，将其权重分配给三个级别：第一个级别假设选择器中的ID选择器数量为n，第二个级别假设选择器中的类选择器、伪类选择器和属性选择器数量为n，第三个级别假设选择器中的元素选择器、伪元素选择器数量为n。
• 如果两个样式的优先级相同，则最后一个出现的样式将优先采用。
• 如果元素属性中含有style，则style属性中的样式将覆盖其他外部样式。

举例说明

1. 下面是一个示例CSS代码：

div#container > ul li.item:hover {
  color: red;
}

这段代码包含一个ID选择器，一个伪元素选择器，两个元素选择器和一个伪类选择器。它们的权重分别是：（0, 0, 3, 1），其中权重的计算规则已经在前面解释过了。假设有另外一个样式如下：

div#container > ul li.item {
  color: blue;
}

这个样式的权重是（0, 0, 3, 0），因为它没有伪类选择器和伪元素选择器。因此在默认情况下，蓝色的样式将被应用。

但是如果将蓝色样式修改一下，加入一个!important，如下：

div#container > ul li.item {
  color: blue !important;
}

这时候，这个样式会覆盖掉任何其他权重低的样式，即使它们包含!important标记。

1. 再来看一个示例代码：

p {
  color: blue;
}

#intro p {
  color: red;
}

这个代码中有两个样式规则，它们都选择了p元素，但是它们的权重不同。第一个样式的权重是（0, 0, 1, 0），而第二个样式的权重是（0, 0, 1, 1），因为它包含了一个ID选择器。

假设有以下HTML代码：

<div id="intro">
  <p>hello world</p>
</div>

在此情况下，p元素将采用红色样式，因为它的权重更高。如果HTML代码中没有id为“intro”的div元素，则p元素将采用蓝色样式。