Question

选择按钮时，以下代码将按钮文本变为深色。我假设这是来自Bootstrap的btn类中嵌入的代码。如何在选择按钮后覆盖代码以阻止文本更改颜色？

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    .buttonColor{
    color:#ff0000;
}   
.buttonColor:hover{
    color:#ffff00;
}
</style>
</head>
<body>
    <button  class="buttonColor btn" > Submit</button>
</body>
</html>

Answer 1

这是一个常见问题：How to overwrite styling in Twitter Bootstrap，best way to override bootstrap css，列表继续。

阅读CSS law of specifity。基本上，如果您在类声明中更具体，则可以覆盖针对相同元素的其他元素：

在你的例子中：

button.buttonColor.btn {
    color: red;
    padding: 50px;
}

将覆盖BootStrap的button.btn声明。

同样，添加伪选择器以覆盖其他状态：

button.buttonColor.btn:active，button.buttonColor.btn:hover等

Answer 2

假设选择＆＃34;选择＆＃34;你的意思是按钮的活动状态，这就是你实现它的方式：

<a href="#anchor">anchor</a>

Answer 3

Bootstrap使用:hover，:active和:focus伪类来定位特定的元素状态：

/* Example of Bootstrap :active styles for buttons */
.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

以及：

/* Example of Bootstrap :focus and :hover styles for buttons */
.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    text-decoration: none;
}

所以你只需要使用自己的风格明确覆盖它们：

/* The more specific your selector (e.g. the more accurately it describes an  */
/* element, the more likely a style will be applied. */
.btn.buttonColor:active,
.btn.buttonColor.active,
.btn.buttonColor:hover,
.btn.buttonColor:focus {
    color: #ffff00!important;
}

或者如果您想要更具体，您可以专门明确地定位<button>元素：

button.btn.buttonColor:active,
button.btn.buttonColor.active,
button.btn.buttonColor:hover,
button.btn.buttonColor:focus {
    color: #ffff00!important;
}

如何覆盖引导程序？

3 个答案: