强化 CSS 样式优先级的多种方法

一、CSS样式优先级的基础规则

在 CSS 中，优先级的计算主要依赖于选择器的权重。权重越高，优先级越高。

CSS 选择器的权重计算规则

CSS 选择器的权重由以下部分组成：
1. 行内样式：`style="..."`，权重为 1000。
2. ID 选择器：如 `#id`，权重为 100。
3. 类选择器、伪类、属性选择器：如 `.class`、`[attr=value]`、`:hover`，权重为 10。
4. 标签选择器、伪元素：如 `div`、`::before`，权重为 1。
5. 通配符选择器（`*`）、继承的样式：权重为 0。

权重的计算是累加的。例如：

div .box #id {
  /* 权重 = 1 (div) + 10 (.box) + 100 (#id) = 111 */
}

二、决定样式优先级的其他规则

1. 顺序：如果两个选择器的权重相同，后定义的样式会覆盖先定义的样式。
2. 继承：子元素会继承父元素的某些样式（如 `color`、`font-family`），但继承的样式权重较低，容易被覆盖。

三、强化 CSS 样式优先级的 10 种方法

1.使用更高优先级的选择器

通过使用 ID 选择器或更具体的选择器，可以提升样式的优先级。

示例：

```css
/* 权重为 10 */
.button {
  color: red;
}

/* 权重为 100 */
#primary-button {
  color: blue;
}

在这个例子中，`#primary-button` 的权重更高，因此它会覆盖 `.button` 的样式。

2.使用 `!important`

`!important` 是 CSS 中的“终极武器”。无论选择器的权重如何，带有 `!important` 的规则都会覆盖其他冲突的规则。

示例：
.button {
  color: red !important;
}

#primary-button {
  color: blue;
}

在这个例子中，`.button` 的 `color: red !important` 会覆盖 `#primary-button` 的 `color: blue`。

注意：`!important` 应谨慎使用，滥用会降低代码的可维护性。

3.嵌套选择器

通过嵌套选择器，可以增加选择器的权重。例如，使用多个类选择器或组合选择器。

示例：
/* 权重为 10 */
.button {
  color: red;
}

/* 权重为 20 */
.container .button {
  color: blue;
}

在这个例子中，`.container .button` 的权重更高，因此它会覆盖 `.button` 的样式。

4.重复选择器

重复选择器可以增加权重，但这种做法不推荐，因为它会导致代码难以维护。

示例：

```css
/* 权重为 10 */
.button {
  color: red;
}

/* 权重为 20 */
.button.button {
  color: blue;
}

在这个例子中，`.button.button` 的权重更高，因此它会覆盖 `.button` 的样式。

5.使用行内样式

行内样式的权重非常高（权重为 1000），仅次于 `!important`。

示例：
<div class="button" style="color: green;">Click me</div>

即使外部样式定义了 `.button { color: red; }`，行内样式仍然会生效。