关于CSS选择器优先级的规则说明

作者：System 时间：2024年08月07日分类：所有,css3 字数：642

CSS选择器的优先级是由几个不同的标准决定的，这些标准被称为选择器的权重。选择器的权重是通过组合它们的规则来决定的，这些规则包括：

权重是通过将这些数字按照一定的规则相加来计算的，但是有一个例外，即当权重相同时，最后定义的规则将会被应用。

例如，考虑以下两个选择器：




div#app b {
  color: red;
}
 
div b {
  color: blue;
}

第一个选择器的权重是：0,1,0,1，第二个选择器的权重是：0,0,0,1。由于第一个选择器的权重更高，那么在应用样式时，元素将会是红色。

如果你想要提高特定规则的优先级，可以使用!important，例如：




div#app b {
  color: red !important;
}

使用!important可以提高规则的权重，使其超过其他所有没有使用!important的规则。但请注意，滥用!important可能会导致样式难以维护，所以应该谨慎使用。