css - 在 css 中，如何在保留另一个类的背景的同时将一个类的背景设置为无？

Question

我有以下 Bootstrap HTML:

<div class='input-group'>
    <input class='form-control' /> 
    <span class='input-group-addon btn btn-primary'><i class='fa fa-chevron-down'></i></span> 
</div> 

input-group-addon 有一个覆盖 btn-primary 图像的背景图像集，因此它显示为灰色而不是我的 btn-primary 颜色。

我认为这个 css 可以解决它:

.input-group .input-group-addon:not(.btn-primary) {
    background-color: none;
}

但似乎没有效果。当我查看 chrome 中的元素时，这种样式甚至没有出现。

我做错了什么以及如何让我的按钮颜色显示而不是输入组插件颜色？

Answer 1

您需要明确设置跨度的背景。当元素没有背景时，其背后的颜色或图像会透出。

相关地，background-color 没有none 值。默认为透明:

Is background-color:none valid CSS?