react-router-dom NavLink激活类与a:visited优先级冲突 无!important解法

CSS优先级由特指度优先，导入顺序仅在特指度相等时生效：

• 全局a:visited规则的选择器特指度为(0,1,1)（1个伪类、1个元素选择器）
• 自定义.chooser--active选择器的特指度为(0,1,0)（1个类选择器）
  因此即使Vita.scss后加载，特指度更高的a:visited规则仍会覆盖.chooser--active的color属性。

方案1：提升激活态选择器特指度 #

修改Vita.scss的SCSS嵌套写法，明确关联a元素，编译后选择器为a.chooser--active，特指度提升至(0,1,1)，与a:visited持平；因Vita.scss加载顺序晚于App.scss，同特指度下后加载规则自动生效。
若需规避后续加载顺序变动的风险，可进一步将特指度提升至(0,2,1)，无需依赖导入顺序。
修改后的SCSS代码：

/* Vita.scss 修改后 */
.chooser {
  /* 编译后为 a.chooser--active */
  a&--active {
    text-decoration: 3px underline var(--black);
    font-weight: 300;
    font-size: 1.1em;
    color: black;
  }
}

方案2：收窄全局规则的作用范围 #

修改App.scss的全局规则，通过:not()伪类排除激活态元素，从根源上避免全局规则命中激活的NavLink：
修改后的SCSS代码：

/* App.scss 修改后 */
a {
  text-decoration: none;
  cursor: pointer;
  color: var(--blue);
  &:hover {
    text-decoration: underline 3px var(--blue);
  }
  /* 排除带.chooser--active类的元素 */
  &:active,
  &:not(.chooser--active):visited {
    color: var(--blue);
  }
}

该方案下全局规则仅作用于非激活态链接，激活态样式完全由.chooser--active规则控制，不存在优先级冲突。

内容的提问来源于stack exchange，提问作者Moritz Valentin