详解CSS中的选择器优先级及样式层叠问题解决

什么是选择器优先级

在CSS中，通过选择器来选择元素并对其应用样式。但是，当存在多个选择器作用于同一个元素时，就会涉及到选择器的优先级问题。选择器优先级指的是在多个选择器作用于同一元素时，浏览器根据不同选择器的权重来决定哪个样式最后会被应用。

通常，一个规则的选择器包含多个简单选择器，权值的计算方法如下：

1. 按照 ID 选择器计数，每个 ID 选择器加 100 分。
2. 按照类选择器、属性选择器和伪类选择器计数，每个选择器加 10 分。
3. 按照元素选择器和伪元素选择器计数，每个选择器加 1 分。

样式层叠问题

除了选择器优先级之外，样式层叠问题也是CSS中需要注意的一个问题。当同一个元素被多个样式同时影响时，就会发生样式层叠问题。这时候浏览器需要按照某种规则来优先选取哪个样式。

通常浏览器选择样式的优先级顺序是：

1. 通用样式（如 body）
2. 类型选择器（如 h1）
3. 父元素中的样式
4. ID选择器（如 #header）
5. 内联样式（如 style="color:red;"）
6. !important

其中，!important 是CSS中最高优先级的样式。通常情况下应该避免过度使用 !important，因为过度使用可能会导致意料之外的问题。

如何解决样式层叠问题

在CSS中，为了解决样式层叠问题，通常有两种方法：

1. 通过选择器优先级来确定样式的优先级。通常应该尽量避免使用 !important。

2. 通过引入“特殊性”较高的选择器来覆盖较低的选择器。例如，如果一个元素有一个类选择器和一个ID选择器，我们可以通过引入两个ID选择器来覆盖原先的ID选择器。

示例说明

示例1

<div class="demo" id="demo1">Hello World!</div>

#demo1 {
  color: red;
}

.demo {
  color: blue;
}

在这个例子中，因为ID选择器的权重比类选择器高，所以最终 div 的颜色会变为红色。

示例2

<div class="demo" id="demo2">Hello World!</div>

#demo2 {
  color: red !important;
}

.demo {
  color: blue;
}

在这个例子中，由于ID选择器使用了 !important，所以最终 div 的颜色会变为红色，即使类选择器的权重更高也无法覆盖它。