Question

我为div添加了一个按钮样式。背景颜色不适用于正常状态。但是，只要我单击按钮并将其变为活动状态，背景颜色就会正确应用。我无法弄清楚为什么背景颜色只出现在一个阶段而不是另一个阶段。我已经使用！important来使它工作。以下是CSS：

.statusbutton {
    -moz-box-shadow:inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
    box-shadow:inset 0 1px 0 0 #ffffff;
    height:43px;
    width:40px;
    border:1px solid #ccc;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    display:inline-block;
    background-color:#fbfbfb !important;
}


.statusbutton:active {
    position:relative;
    background-color:#fbfbfb;
    top:1px;
}

编辑：我意识到问题来自我的样式表的后期部分：

.red {
background:url(status-red.png) no-repeat center center;
}

之后我将.red应用于按钮，这导致背景图像覆盖背景颜色。以下代码最终解决了问题：

.red {
background:url(status-red.png) no-repeat center center;
background-color:#fbfbfb;
}

Answer 1

使用！important通常是一个坏主意。这是你的整个css文件还是更多？可能有另一种具有更高优先级的css样式会覆盖您在此处设置背景颜色的尝试。如果你还有问题，我建议你设置一个jsfiddle

Answer 2

如果您希望此代码有效，则必须从CSS代码中删除!important，否则此规则将优先于:active状态，并记住更改两种状态中的颜色（实际上您将#fbfbfb用于正常和活动状态。）

CSS background-color适用于活动状态，但不适用于正常状态

2 个答案: