CSS |导航权属性

CSS中的导航权属性可以帮助我们解决当有多个样式规则都可以匹配某个元素时，应该使用哪种样式的问题。通常情况下，CSS遵循就近原则，即距离最近的规则优先级最高。但是在某些情况下，我们可以通过为样式规则设置导航权属性来改变其优先级，以达到我们想要的样式效果。

在CSS中，导航权属性有以下三种：

1. !important

使用!important可以将一个样式规则的优先级提高到最高，即使该规则的位置在距离目标元素最远的位置，也能够保证生效。

p {
  color: red !important;
}

在上面的例子中，所有的<p>元素都将会被设置为红色。

但是，我们应该慎重使用!important，因为它的强制性优先级可能会对维护样式表造成困难。当我们需要使用!important时，最好将其用在需要优先级最高的规则上，以确保样式的可维护性。

2. specificity

CSS的优先级用一个四元组来表示，即[inline style，ID，class，tag]。其中每个元素都有一个权值，而specificity的计算就是将这四个元素的值相加得到的。

/* 权值为0，0，1，1 */
p {
  color: blue;
}

/* 权值为0，0，1，2 */
p.special {
  color: red;
}

/* 权值为0，1，0，0 */
#header {
  color: green;
}

/* 权值为1，0，0，0 */
style="color: purple;"

在上面的例子中，红色样式规则的specificity值为0，0，1，2，而绿色样式规则的specificity值为0，1，0，0。因此，当一个<p>元素同时匹配到这两个规则时，它将会变为红色，而不是绿色。

但是，在具有较高特异性的样式规则与具有较低特异性的样式规则冲突时，我们并不一定总是想要更具特异性的规则生效。因此，如果我们需要覆盖具有较高特异性的规则，我们可以使用导航权属性来降低其优先级。

3. source order

source order是指样式规则在样式表中出现的顺序。通常情况下，离目标元素最近的规则优先级最高。因此，如果我们希望在某些情况下，先出现的样式规则可以被后出现的规则覆盖，我们可以使用导航权属性来改变其优先级。

/* 在后面的样式规则中，font-weight为normal */
p {
  font-weight: bold;
}

/* 在前面的样式规则中，font-weight为normal */
p {
  font-weight: normal !important;
}

在上面的例子中，所有的<p>元素都将会在粗体和普通字体之间切换，因为!important会使前一个规则比后一个规则先被应用，而source order又会使后一个规则比前一个规则先被应用。

总结：通过使用导航权属性，我们可以改变样式规则的优先级，以实现我们想要的样式效果，但应该慎重使用，以确保样式表的可维护性和可预测性。