Question

<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中测试过。

Answer 1

您遇到问题的原因是input[type=text]比.error更具体，因此它会覆盖它。使用更具体的选择器：

input.error

或者如果你真的想要安全：

input[type=text].error

有关 CSS specificity, and how it's calculated

的详情

另一种方法是保留当前选择器，但在规则上添加!important关键字：

.error { background: red !important; }

这会立即覆盖与元素匹配的任何其他规则。请注意，它是一个非常强大的工具，可能会在将来导致意想不到的结果。

Answer 2

使用.error { background: red !important }

请注意其存在的限制，请参阅：!important rules (CSS 2.1 Section 6.4.2)

Answer 3

试试这个

<html>
   <head>
       <style>

           input[type='text'], select { background: blue }
           .error { background: red; }
           input.error { background: red; }

       </style>
    </head>
    <body>
        <input type="text" class="error" />
        <select class="error">
            <option>non-sense</option>
        </select>
    </body>
</html>

CSS选择的标签高于类

3 个答案: