如何选择CSS中的所有伪类?
我有一个按钮,我想知道是否可以使下面的 css 更短。
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
我的意思是也许:
.button a:* {
color: #000;
text-decoration: none;
}
也许没有更短的方法,但我只是想知道。 我发现了这样的事情:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
但它不起作用,不知道为什么.. 有关信息 - 我在文件顶部有 a 的通用 css:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
因此按钮类 a 应该覆盖主 a css。
I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
.button a
就是您所需要的,我总是在
a
上设置默认样式,并且仅当我需要具有不同的效果时才定位伪类。编辑以包含注释中的修复:
因为 a 元素的默认样式声明如下:
在样式表的顶部,我们需要将其设为
body .button a
增加选择性,我们就增加了所应用样式的重要性。.button a
is all you needI always set a default style on
a
, and target pseudo classes only when I need to have a different effect.Edit to include fix from comments:
Because a default style for the a element is declared like:
at the top of the stylesheet, we need to make it
body .button a
by increasing selectivity we increase the importance of the styles applied.这里有一些可以尝试的事情,
以确保您的样式表具有“.button a”规则 - 还要确保此样式表包含在定义“a”规则的全局规则之后。
如果这不起作用,请尝试更具体,例如:“.button > a”,仅选择直接后代。
如果这不起作用,虽然这是不好的做法,但您始终可以将样式标记为重要,如下所示:
这将要求最后解析它们。
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
this will demand that they are parsed last.