Question

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

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

当我将它应用于按钮时，它可以正常工作。但是当我尝试将它应用到锚标签时，它并没有，而其他类如我的按钮＆＃39; class对锚标记起作用。

<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;
}

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

Answer 1

在.button定义之后的某个位置存在.green规则，该规则会覆盖.green规则。

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

通过更改.green类a.green，您使选择器更加具体，而a.green选择器现在更适用于浏览器。

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

除非我添加a.class，否则css .class不会对锚标记起作用。为什么？

1 个答案: