一、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; }`，行内样式仍然会生效。