Question

我有一个带有输入和textarea元素的表单的页面。我正在使用bootstrap和我自己的site.css。 site.css位于标记中的boostrap.css之前。我在网站css中有一个css规则，如下所示：

.formcontainer input, textarea {
    background-color: lightgray;
}

表单元素还具有应用于它们的引导程序的表单控件类。问题是输入元素从我的站点css优先处理规则并正确应用背景颜色。但是，对于textarea元素，bootstrap类优先于我的site.css中的规则。所有表单元素都包含在相同的div容器中，并且应用了相同的clasess。我无法理解为什么这些元素会以不同的方式对规则进行优先排序。

以下是标记的示例，其中输入获取背景颜色但textarea不是：

<div id="formpart2" class="formcontainer">
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Email</label>
        <div class="input-group">
            <input type="text" class="form-control invalid" fieldrequired>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
        <div class="input-group">
            <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
        </div>
    </div>
</div>

Answer 1

site.css位于标记中的boostrap.css之前。

有你的问题。 CSS工作的方式，稍后出现的规则（在一个工作表内或包含多个工作表的方面）将覆盖出现在它们之前的规则。切换您的标记，使您的自定义样式排在最后 - 即在 bootstrap.css之前加入site.css 。

（另请注意，textarea是一个非常通用的选择器。您的意思是.formcontainer textarea吗？）

Answer 2

css引擎始终将.class和#id优先于tag-name。您的风格问题是，您使用标记名textarea来设置样式form-control。因此，css引擎会优先.form-control优先于tag-name。请参阅以下示例。

无效

.formcontainer input,
textarea {
  background-color: lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="formpart2" class="formcontainer">
  <div class="form-group">
    <label class="control-label visible-ie8 visible-ie9">Email</label>
    <div class="input-group">
      <input type="text" class="form-control invalid" fieldrequired>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
    <div class="input-group">
      <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
    </div>
  </div>
</div>

会工作

input.form-control,
textarea.form-control {
  background-color: lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="formpart2" class="formcontainer">
  <div class="form-group">
    <label class="control-label visible-ie8 visible-ie9">Email</label>
    <div class="input-group">
      <input type="text" class="form-control invalid" fieldrequired>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label visible-ie8 visible-ie9">Contact Instructions</label>
    <div class="input-group">
      <textarea type="text" class="form-control" rows="10" cols="15" fieldrequired></textarea>
    </div>
  </div>
</div>

希望这有帮助！

Answer 3

在Bootstrap中，您可能会发现一个如下所示的规则：

.formcontainer input, 
.formcontainer textarea {
    /* whatever */
}

在您尝试覆盖时，您忘记了textarea的上下文：

.formcontainer input, 
textarea {
    background-color: lightgray;
}

这使得textarea的规则不如Bootstraps规则那么具体，所以即使你以正确的顺序加载css文件，你的textarea样式也不会覆盖Bootstrap的textarea样式（假设你在.formcontainer上下文中）。

我强烈建议您详细了解CSS specificity。如果您想使用CSS，非常基础。

来自不同样式表文件的CSS选择器优先级

3 个答案: