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

Question

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

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

表单元素也应用了 Bootstrap 中的表单控制类。问题是输入元素优先考虑我网站 css 中的规则并正确应用背景颜色。但是，对于 textarea 元素， Bootstrap 类优先于我的 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

The site.css is before the boostrap.css in the markup.

这是你的问题。按照 CSS 的工作方式，稍后出现的规则(在一张纸内或包含多张纸时)将覆盖出现在它们之前的规则。切换您的标记，使您的自定义样式出现在最后 - 即，包括 bootstrap.css before site.css。

(另外，请记住 textarea 是一个非常通用的选择器。您是说 .formcontainer textarea 吗？)