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

我正在写一个样式表来扩展一个基本样式表，其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:*的方向是否会覆盖每个可能的状态，或者某种方式来简单地删除所有伪类？

来源

2017-03-03 Richard B

如果有，它将是'：* {}'。但没有。 –

您是否尝试过'tagname.classname'，因为您不想使用'！important'和'.classname'本身无法工作？ –

如果你能够把类中的某些包装内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>

来源

2017-03-03 19:53:27 Dekel

欢迎您:) – Dekel

我认为，它可以解决与: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/

我尚未编辑代码本身，因此根据这个新的信息自己解决它。

来源

2017-03-03 19:55:34

谢谢。这看起来像是在有更多浏览器支持的情况下可能是最好的答案，但Dekel的解决方案似乎是目前最强大的解决方案。 –

是的，我也认为德克尔的答案更稳定，因此，最好是我的:-) –

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

回答

相关问题