【问题标题】:How to select all a pseudo-classes in CSS?如何选择 CSS 中的所有伪类?
【发布时间】:2011-04-26 09:44:10
【问题描述】:

我有一个按钮,我想知道是否可以使 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应该覆盖主css。

【问题讨论】:

    标签: css css-selectors pseudo-class


    【解决方案1】:

    .button a 就是你所需要的

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

    编辑以包含来自 cmets 的修复:

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

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

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

    【讨论】:

    • 嗯,是的,我试过了,但是按钮类使用的是通用的 a:visited css。请参阅萤火虫的屏幕截图:i52.tinypic.com/x69tf.png
    • 你可以做button a:visited, button a:hover等。如果我没记错的话,那应该覆盖一般的'a:hover'样式。查看:css.maxdesign.com.au/selectutorial/index.htm 了解有关 CSS 选择器的更多信息。
    • 只需将其设为body .button a,这将解决您的问题(通过增加您的选择性,您可以使这种风格具有优先权)
    【解决方案2】:

    这里有一些可以尝试的方法

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

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

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

    color: #fff !important;
    

    这将要求它们最后被解析。

    【讨论】:

      猜你喜欢
      • 2016-12-25
      • 1970-01-01
      • 2012-04-05
      • 1970-01-01
      • 2016-02-05
      • 1970-01-01
      • 2015-09-28
      • 2012-07-27
      相关资源
      最近更新 更多