清除元素上所有伪类的最简单方法是什么?
我正在写一个样式表来扩展一个基本样式表,其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:*
的方向是否会覆盖每个可能的状态,或者某种方式来简单地删除所有伪类?
如果你能够把类中的某些包装内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
我认为,它可以解决与:any
伪类。
<a href="google.com">Google</a>
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
浏览器支持并不完美: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/
我尚未编辑代码本身,因此根据这个新的信息自己解决它。
谢谢。这看起来像是在有更多浏览器支持的情况下可能是最好的答案,但Dekel的解决方案似乎是目前最强大的解决方案。 –
是的,我也认为德克尔的答案更稳定,因此,最好是我的:-) –
如果有,它将是':* {}'。但没有。 –
您是否尝试过'tagname.classname',因为您不想使用'!important'和'.classname'本身无法工作? –