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

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>

Answer 2

我认为，可以使用:any 伪类来解决。

<a href="google.com">Google</a>

<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>

https://jsfiddle.net/ycfokuju

浏览器支持不完善：https://developer.mozilla.org/en/docs/Web/CSS/:any

编辑：

实际上，正如我发现的那样，这个答案不是很准确。 （尽管它被投票了 4 次，哈哈）。

• 首先，你不需要:any 来完成这个任务。你需要:any-link。

• 第二点是:any本身就是:matches的旧名。因此，在我们的术语中，我们应该使用术语:any-link 和:matches，而不是使用术语:any。

:any-link使用示例：https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

:mathes使用示例：https://css-tricks.com/almanac/selectors/m/matches/

我没有编辑代码本身，所以根据这个新信息自己修复它。