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

时间:2010-10-16 18:57:46

标签: css css-selectors pseudo-class

我有一个按钮,我想知道是否有可能使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;
}

但它不起作用,不知道为什么.. 有关信息 - 我在文件的顶部有一个css的通用css:

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

所以按钮类a应该覆盖主要的css。

2 个答案:

答案 0 :(得分:5)

.button a就是您所需要的一切

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

修改以包含评论中的修正

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

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

在样式表的顶部,我们需要通过提高选择性来使它body .button a,从而增加所应用样式的重要性。

答案 1 :(得分:0)

以下是一些值得尝试的事情

确保您的样式表有一个“.button a”规则 - 同时确保在定义“a”规则的全局规则之后包含此样式表。

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

如果这不起作用,虽然这是不好的做法,你总是可以将你的风格标记为重要,如下所示:

color: #fff !important;

这将要求最后解析它们。