2

我在 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;
}
4

2 回答 2

1

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

于 2013-01-18T01:39:36.347 回答
0

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

于 2013-01-18T01:39:37.520 回答