Bootstrap按钮颜色不变

Question

我在按钮上将字体颜色更改为白色时遇到了一些麻烦。当我在CSS中对.btn-primary进行更改时，我可以按照我想要的方式编辑按钮，但是当我定位颜色时，没有任何反应。我试着去.caption-one button改变那里的颜色，也没有发生任何事情。不知道还有什么可以尝试。这是它的样子。

这是我的HTML

<!-- Wrapper for Slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <!-- Set the first background image using inline CSS below. -->
        <img src="img/golden_egg3.jpg" class="img-responsive first-slide" alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                    <div class="caption-one">
                        <h1>The right Wealth Advisor can make a big difference.</h1>
                        <br>
                        <button type="button" class="btn btn-primary btn-lg hvr-underline-from-left"><a href="contact.html">Learn More</a></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

我的CSS按钮本身：

.btn-primary {
    text-transform: uppercase;
    border: none;
    background-color: #50b948; /*Green*/
    font-family: 'Quicksand', sans-serif;
}

我对上面显示的.btn-primary所做的所有更改都发生在颜色之外。 添加!important没有做任何事情。

我.caption-one button的CSS也没有做任何事情

.caption-one button {
    color: #FAFAFA;
}

非常感谢任何帮助。

Answer 1

以下代码将重新着色按钮，而无需依赖!important：

.caption-one .btn-primary { 
  background: #50b948;
  border-color: #33912c;
}

.caption-one .btn-primary a {
  color: #fafafa;
}

.caption-one .btn-primary:hover { 
  background: #33912c;
}

如果您将.btn和.btn-primary课程应用到<a>而不是<button>（我不确定您为何使用包裹在按钮）你可以进一步减少写入的CSS总量。

Answer 2

试试这个：

.caption-one button a{
    color: #FAFAFA !important;
}