Question

我希望有人可以解释如何让按钮从引导程序继承所有按钮的属性，但是覆盖它的颜色并解释它是如何在外行的条件下工作的。

我有一个包含以下课程的按钮：

class="btn action-braintree-paypal-logo"

显然，btn的属性来自bootstrap（因为我正在使用它）然后我已经定义了自己的action-braintree-paypal-logo。

然后我在自己的样式表中有这个：

.action-braintree-paypal-logo {
    background-color:#019cde;
}

但是这种颜色一直让我们失去了自己的颜色，而我却无法理解为什么。

我正在使用的样式表也是在脑子里引导后的。

非常感谢任何帮助。

Answer 1

请确保您引用的样式表的链接标记具有rel="stylesheet"属性，否则不会导入样式。

示例：

以下CSS将起作用：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

但是这个没有：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.action-braintree-paypal-logo {
    background-color:#019cde;
}
</style>

<button class = "btn action-braintree-paypal-logo">Test Button</button>

Answer 2

您可以为此使用内联css .. class =“btn”style =“background-color：＃019cde;在按钮标记中

Answer 3

简单解决方案CSS特异性：

.btn.action-braintree-paypal-logo {
    background-color:#019cde;
}

Answer 4

试试这个，

.btn.action-braintree-paypal-logo { background: red; color: #fff; }

继承Boostrap Button CSS并覆盖颜色说明

4 个答案: