除非我添加 a.class，否则 css .class 不适用于锚标记。为什么？答案

【问题标题】：css .class doesn't work on anchor tag unless i add a.class. why?除非我添加 a.class，否则 css .class 不适用于锚标记。为什么？
【发布时间】：2014-10-11 23:49:37
【问题描述】：

我有一个简单的 css 类，用于设置按钮和锚标记的样式，但有些奇怪。

.green
 {
    background-color: #35db22;
    color:white;
 }

当我将它应用到按钮时，它工作正常。但是当我尝试将它应用于锚标记时，它不会，而像我的“按钮”类这样的其他类确实在锚标记上工作。

<a class="button green">green</a>

当我调试它时，我发现它确实可以通过将a.green 添加到类选择器：

.green, a.green
{
   background-color: #35db22;
   color:white;
}

只有我觉得这很奇怪吗？为什么会这样？我有很多这样的类，所以将它们添加到所有这些类中需要很多时间...... :(

知道发生了什么吗？还是这只是 css 中的一个错误？

编辑

这里还有一些 css，因为 ZachSaucier 要求它：

/*CONTROLS*/
button, a.button, input[type="submit"], input[type="button"] 
{

    text-align:center;

    min-height:20px;
    min-width:100px;
    font-size:20px;

    border: none;
    padding: 5px;
    background-color: darkgray;
    color: black;
    text-decoration: none;

    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
button:hover, a.button:hover, input[type="submit"]:hover, input[type="button"]:hover
{
    background-color:gray;
    color:whitesmoke;
}

button:active, a.button:active, input[type="submit"]:active, input[type="button"]:active
{
    background-color:black;
    color:white;
}


.green
{
    background-color: #35db22;
    color:white;
}

我是一个 CSS 初学者，所以这可能是显而易见的......

【问题讨论】：

这可能是由于选择器的特异性。另一条规则可能会覆盖原来的规则。我们必须查看您的所有 CSS 或演示才能确认这一点。
我猜测您稍后会在 CSS 中定义 .button，也许？
@ZachSaucier 所有的CSS？这很多，但没关系。
@DavidThomas 不，.button 是首先定义的东西之一，而 .green 位于底部。
@JoJo a.button 是根据我的第一眼看到的。这确实是一个特异性问题。使用开发工具来捕捉这样的事情是最好的方法。 This page 可以帮助您了解 CSS 选择器在特异性方面的权重

标签： html css anchor

【解决方案1】：

要么在.green 定义之后的某处有一个.button 规则，它会覆盖.green 规则。

或者有一个 a.button 规则，它比 .green 更具体，它覆盖了 .green 类。

通过更改.green 类a.green，您可以使选择器更加具体，而a.green 选择器现在对于浏览器来说更加重要。

您可以检查您正在使用的任何浏览器的开发人员工具，并查看覆盖.green 类中的值的内容。您通常可以通过按 F12 打开开发者工具，我相信您可以在网络上找到有关开发者工具以及如何使用它的信息。

【讨论】：