如何选择CSS中的所有伪类?

发布于 2024-09-28 03:09:50 字数 663 浏览 8 评论 0原文

我有一个按钮,我想知道是否可以使下面的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

同尘 2024-10-05 03:09:50

.button a 就是您所需要的,

我总是在 a 上设置默认样式,并且仅当我需要具有不同的效果时才定位伪类。

编辑以包含注释中的修复:

因为 a 元素的默认样式声明如下:

a:link {
    color: #DA5632;
}
a:visited {
    color: #CE3408;
}
a:hover {
    color: #289BF8;
}
a:active {
    color: #CE3408;
}

在样式表的顶部,我们需要将其设为 body .button a增加选择性,我们就增加了所应用样式的重要性。

.button a is all you need

I 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:

a:link {
    color: #DA5632;
}
a:visited {
    color: #CE3408;
}
a:hover {
    color: #289BF8;
}
a:active {
    color: #CE3408;
}

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.

骄兵必败 2024-10-05 03:09:50

这里有一些可以尝试的事情,

以确保您的样式表具有“.button a”规则 - 还要确保此样式表包含在定义“a”规则的全局规则之后。

如果这不起作用,请尝试更具体,例如:“.button > a”,仅选择直接后代。

如果这不起作用,虽然这是不好的做法,但您始终可以将样式标记为重要,如下所示:

color: #fff !important;

这将要求最后解析它们。

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:

color: #fff !important;

this will demand that they are parsed last.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文