我有一个带有输入和textarea元素的表单页面。我正在使用引导程序以及自己的site.css。 site.css在标记中的boostrap.css之前。我在网站CSS中有一个CSS规则,如下所示:
.formcontainer input, textarea {
background-color: lightgray;
}
表单元素还具有引导程序中的表单控制类。问题是输入元素优先考虑来自我的网站CSS的规则并正确应用背景色。但是,对于textarea元素,bootstrap类的优先级高于我的site.css中的规则。所有表单元素都包装在相同的div容器中,并且应用了相同的格点。我无法理解为什么元素对规则的优先级不同。
这是标记的示例,其中输入获得背景颜色,但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>
最佳答案
在Bootstrap中,您可能会发现一条规则,其开始如下:
.formcontainer input,
.formcontainer textarea {
/* whatever */
}
在尝试覆盖它时,您忘记了textarea的上下文:
.formcontainer input,
textarea {
background-color: lightgray;
}
这使textarea的规则比Bootstraps的规则不那么具体,因此,即使您以正确的顺序加载css文件,您的textarea样式也不会覆盖Bootstrap的textarea样式(假设您位于
.formcontainer
上下文中)。我强烈建议您了解有关CSS specificity的更多信息。如果您想使用CSS,这是非常基础的。