如何简单清除元素上的所有伪类？

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:*的东西可以涵盖所有可能的状态，或者有一些简单地删除所有伪类的方法？

- RichardB

---

如果有的话，它将是 :* {}。但是现在没有。 - tao

你尝试过使用 tagname.classname 吗？因为你不想使用 !important，而 .classname 本身又没有起作用。 - Yogesh Mistry

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>

- Dekel

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

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

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

- john c. j.

---

谢谢。这看起来可能是最好的答案，当有更多的浏览器支持时，但目前Dekel的解决方案似乎是最稳健的。 - RichardB

是的，我也认为Dekel的答案更稳定，因此比我的好 :-) - john c. j.

这份信息已经严重过时了。关于 :any-link 的注释非常有用，但是答案应该被更正并删除过时的信息。 - Garret Wilson