Btn没有得到颜色

Question

我有一个带有以下代码的按钮，但下面的CSS不能正常工作 即颜色和大小没有变化

CSS ：

.btn-default .act-buttons{
    background-color: black!important;
    color: white!important;
    height: 28px;
    width: 28px;
}

HTML ：

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
    </div>
</div>

Answer 1

鉴于你最近的HTML ......

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" id="submit" value="Save" class="btn btn-default act-buttons" />
    </div>
</div>

试试这个css（注意.btn-default.act-buttons中没有空格）：

.btn-default.act-buttons{
    background-color: black!important;
    color: white!important;
    height: 28px;
    width: 28px;
}

这将针对具有btn-default和act-buttons

类的任何元素

---

.btn-default .act-buttons将使用类btn-default定位父元素，该类包含具有类act-buttons的子元素

.btn-default,.act-buttons会定位任何具有btn-default或act-buttons

类别的元素

Answer 2

你的css是针对任何一个名为act-buttons的类，它位于一个具有类btn-default的元素中

您可以将其更改为

.btn-default，.act-buttons {...}

或

.btn-default.act-buttons {...} //类之间没有空格

Answer 3

CSS Selectors概述：

首先，确保您使用正确的选择器：

• Descendant selector ：.btn-default .act-buttons
  将找到类act-buttons的任何元素，这些元素是类btn-default

的元素的后代

• 和选择器：.btn-default.act-buttons
  将找到与两个类选择器匹配的任何元素，这意味着任何具有class="btn-default act-buttons"

的元素

• 或选择器：.btn-default, act-buttons
  会发现 的任何元素都有btn-default 或类act-buttons

另外，检查......

• html元素可以访问选择器
• 您已在引导程序样式表后应用自定义样式
  • 您应该始终尝试使用自己的标准样式覆盖
    • 然后你不需要!important
• 最后，确保您始终使用act-buttons或action-buttons

Here's a working demo in Fiddle

.btn.act-buttons{
    background-color: rgb(0,0,0);
    color: white;
    width: 100px;
}

屏幕截图：

Answer 4

@KyleMit是你将从中学到的最多的答案，具体来说，你要注意他在And Selector上的注释：“btn-default.act-buttons会找到任何与两个类选择器相匹配的元素，这意味着任何具有class="btn-default act-buttons“

的元素

因此，使用And Selector，您应该使用

.btn-default.act-buttons{
    background-color: black;
    color: white;

就像这里： http://www.bootply.com/bFjCr8eQlY

ps - 你的身高和宽度需要它自己的固定，除非你在按钮中放入的是正确尺寸，但这是另一个问题。

Answer 5

好好试试这个

<div class="form">

    <input class="field button2" id="submit" type="button" value="Save"/>

    </div>

和你的css

.button {
    background-color: #FFFFFF; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    color: #000
}
.button:hover { background-color: #46000D; }


input.button2 {
    background-color: #000000;
    color: #ffffff
}
input.button2:hover { background-color: #ffffff; color: #000000; }

看起来会更好，我希望我能帮到你:-D