清除元素上所有伪类的最简单方法是什么？

Question

我正在编写一个样式表来扩展一个基本样式表,其CSS有许多伪类应用于某些元素.我希望我的样式表能够覆盖一些样式,这些样式应用于一个元素,无论它处于什么状态,是否悬停,聚焦等.

例如,基本样式表可能具有样式

.classname {
   color:#f00;
}

.classname:hover {
   color:#0f0;
}

.classname:active {
   color:#00f;
}

但在这些样式后添加以下内容不会覆盖伪状态...

.classname {
   color:#fff;
}

以下工作,但它感觉很多代码似乎很简单.

 .classname,
 .classname:active,
 .classname:hover,
 .classname:focus,
 .classname:visited,
 .classname:valid{
    color:#fff;
  }

同样,我知道一个!important会工作,但这通常是一个结构不良的样式表的警告信号.

是否有任何内容.classname:*可以覆盖每个可能的状态,或者某种方式来简单地删除所有伪类？

Answer 1

如果您能够将类放入某些包装器中，id则可以防止伪类因特殊性而生效：

body {
  background: black;
}
.classname {
   color:#f00;
}
.classname:hover {
   color:#0f0;
}
.classname:active {
   color:#00f;
}
#a .classname {
   color:#fff;
}

<div class="classname">all pseudo works</div>

<div id="a">
  <div class="classname">none of the pseudo works</div>
</div>