我正在编写一个样式表来扩展一个基本样式表,其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>
我想,它可以用: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
我没有编辑代码本身,所以根据这些新信息自行修复。