如何移除CSS中div a规则影响并使a.color-3样式正常生效？

我拥有样式文件style1.css，内容如下：

a.color-1
{
    color: blue;
}

a.color-orther
{
   color: green;
}

a.color-3
{
  color: red; /* ---> right color */
}

 /** REMOVE define lines **/
div a 
{
   color: white !important;
}

HTML文件引入了该样式文件，结构如下：

<div> 
  <a class="color-1  color-orther color-3  "  > tag </a> 
</div>

我希望移除div a这条CSS规则的影响，尝试在HTML中添加如下样式：

div a 
{
   color: unset !important; /* --->  color-3 not working */
}

但这样会导致a.color-3的红色样式无法生效，请问该如何解决？

解决方案 #

方法1：针对目标类编写更高优先级的样式（无需修改原CSS） #

原div a规则使用了!important，要覆盖它必须用优先级更高的选择器并添加!important。直接针对带color-3类的a标签编写样式：

div a.color-3 {
  color: red !important;
}

该选择器优先级（元素+类+后代关系）高于div a，加上!important后会强制覆盖原白色样式，同时保留红色。

方法2：修改原CSS移除!important（若有权限修改style1.css） #

如果可以修改原样式文件，把div a规则里的!important删除：

/** REMOVE define lines **/
div a 
{
   color: white; /* 移除!important */
}

然后将HTML中添加的重置样式去掉!important：

div a {
  color: unset;
}

此时a.color-3的优先级（类选择器+元素选择器）高于div a，红色样式会正常生效。

方法3：用否定选择器精准重置（灵活适配多场景） #

如果页面中还有其他a标签需要重置，仅保留color-3的样式，可使用否定选择器：

div a:not(.color-3) {
  color: unset !important;
}

该规则只会重置不带color-3类的a标签，带有该类的标签不受影响，原红色样式正常生效。

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