jquery - 添加了 jquery 的类 css 未应用

Question

我有一个简单的 twitter-bootstrap 3 输入文本:

<input type="text" class="form-control" placeholder="Search for...">

我用 jquery 添加了一个 (hasError) 类来将边框颜色设置为红色，这是 hasError 类:

.hasError{
    border-color: #a94442;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

类已添加但未应用，我认为类 (form-control) 具有更高的优先级..请问我该如何解决这个问题？

Answer 1

这听起来像是一个 CSS specificity问题。如果这是您自己的样式规则，请尝试将其更改为以下内容:

input.form-control.hasError {
    border-color: #a94442;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

如果您使用 Bootstrap 中的内置样式，则需要将 has-error 类应用到父元素以使错误样式生效。