css中改变优先级

CSS样式中有一些特定的CSS属性，这些属性可以改变CSS的优先级，以便我们可以控制不同元素的CSS属性谁更具有优先级。

在CSS中定义样式时，如果同一个元素上有多个选择器，那么就会出现优先级冲突。当两个或多个选择器规则应用于一个元素时，浏览器根据它们的特定优先级来决定哪个规则将应用于该元素。

1. 选择器的特殊性

CSS选择器的特殊性可用于确定应用于元素的选择器的优先级。特殊性是一个加权值，该值以选择器中每个组件的数量为基础。选择器包括ID选择器、类选择器、属性选择器和通用选择器。 ID选择器的特殊性最高，通用选择器的最低。可以将特殊性视为CSS选择器的“等级”。

2. !important 关键字

!important是一种CSS声明，用于覆盖任何其他声明。当声明与!important关键字一起使用时，无论选择器的优先级如何，该声明始终覆盖所有其他声明。

div {
  color: red !important;
}
span {
  color: blue;
} 

上述代码中的div元素的文本将始终以红色呈现，即使它是在具有更高特殊性的选择器下定义的。

3. 内联 CSS

内联样式规则是嵌入到HTML文档的元素上的一组CSS声明。因为它们直接在HTML元素中定义，所以它们永远不会被其他样式表规则覆盖。

<div style="color: green">这个文本是绿色</div> 

上述代码中的div元素的文本始终呈现为绿色，即使在具有更高优先级的样式规则下定义了与该元素相关的颜色。