jquery - 使用 jquery 修改全局 css 声明

Question

我正在使用 Twitter Bootstrap 创建如下表单元素。通常“提交”应该放在“控件”容器之外，但对于我的布局，我需要像这样在里面:

<div class="control-group">
    <div class="controls">
        <input type="text" name="email" value="" id="email" class="input-large email" placeholder="email" required="">  
        <input type="submit" value="submit" name="submit" id="submit" class="btn btn-success">
    </div>
</div>

除了一件事，一切正常，当我将“错误”类添加到

<div class="control-group error">

“提交”按钮也得到了我不想要的样式。如果我修改 bootstrap CSS 以包含 :not([type='submit'])

.control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
border-color: #B94A48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

和

.control-group.error .checkbox, .control-group.error .radio, .control-group.error input**:not([type='submit'])**, .control-group.error select, .control-group.error textarea {
color: #B94A48;
}

但是我想知道如果元素是特定类型，我是否能以某种方式找到另一种使用 jquery 的方法来防止这种样式一直向下渗透......

否则我正在调查

1. 找到一种方法来指示特定元素忽略特定CSS类
2. 应用所有 CSS 创建一个完全相同的副本在我添加错误类之前元素的属性和之后替换它

Answer 1

我通常做的是在我的全局样式表中添加一个类来覆盖字段上的错误类。您可以通过向 CSS 添加特殊性来做到这一点。似乎是完全跨浏览器合规性的最简单(也许不正确)的方法。