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

Question

我有一个带有 input 和 textarea 元素的表单的页面。我正在使用引导程序和我自己的 site.css。 site.css 在标记中的 boostrap.css 之前。我在站点 css 中有一个 css 规则，如下所示：

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

表单元素还应用了来自引导程序的表单控制类。问题是输入元素优先考虑我的站点 css 中的规则并正确应用背景颜色。但是，对于 textarea 元素，引导类优先于我的 site.css 中的规则。所有表单元素都包装在相同的 div 容器中，并应用了相同的类。我无法理解为什么元素以不同的方式获得规则的优先级。

这是一个标记示例，其中输入获取背景颜色但文本区域没有：

<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 before 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 规则不如 Bootstrap 的规则具体，因此即使您以正确的顺序加载 css 文件，您的 textarea 样式也不会覆盖 Bootstrap 的 textarea 样式（假设您在 .formcontainer 上下文中）。

我强烈建议您了解有关CSS specificity 的更多信息。 非常如果你想使用 CSS 的话。