css - CSS 选择的标签高于类

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

score 5 · Accepted Answer

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

input.error

或者，如果您想真正安全：

input[type=text].error

有关CSS 特异性及其计算方式的更多信息

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

.error { background: red !important; }

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

score 2 · Accepted Answer

利用.error { background: red !important }

请注意此限制，请参阅：！重要规则（CSS 2.1 第 6.4.2 节）

score 0 · Accepted Answer

尝试这个

<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 - CSS 选择的标签高于类

3 回答 3

Related

Reference