Question

我正在使用Twitter Bootstrap创建如下所示的表单元素。通常情况下，'submit'应该放在'controls'容器之外，但是对于我的布局，我需要它就像这样：

<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">

'submit'按钮也是我不想要的样式。如果我将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);
}

AND

.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的另一种方式，如果元素属于特定类型，则阻止这种风格一直向下...

否则我正在研究

找到一种方法来指示特定元素忽略特定元素 css class
使用所有应用的css创建完全相同的副本在添加错误类之前元素的属性

Answer 1

我通常做的是在我的全局样式表中添加一个类来覆盖字段上的错误类。您可以通过为CSS添加特异性来实现此目的。似乎是完全跨浏览器合规性的最简单（可能不是正确的）方式。

Answer 2

您可以嵌套范围并相应地设置样式。

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

这会将您的错误仅限制在该范围内。

用jquery修改全局css声明

2 个答案: