<html>
<head>
<style>
input[type='text'], select {
background: blue
}
.error {
background: red
}
</style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
如果班级.error背景为红色,则必须为红色.即使input[type="text"]有蓝色背景.在IE和GC中测试过.
你看到的问题的原因是,input[type=text]它更具体.error,因此它会覆盖它.使用更具体的选择器:
input.error
或者,如果你想真正安全:
input[type=text].error
另一种方法是保留当前选择器,但!important在规则上添加关键字:
.error { background: red !important; }
这将立即使其覆盖与元素匹配的任何其他规则.请注意,它是一个非常强大的工具,可能会在未来导致意想不到的结果.