CSS问题：关于覆盖样式的问题

Question

我有两个css文件，分别是global.css和specific.css。

在我的HTML中，我有：

<div class="someForm">
    <form>
        <input type="submit" class="submit red">
    </form>
</div>

在global.css中，我默认有 .someForm form input.submit {background-color: #ccc;} 这个样式。在specific.css中，我有 .red {background-color: red;} 这个样式。

我在global.css之后调用了specific.css，但按钮没有变成红色。它仍然是默认的灰色 "ccc"。我不能编辑specific.css或旧的global.css样式（旧代码依赖于它）。我只能在global中添加新的CSS。有什么办法可以让按钮变成红色吗？

- Tom

Answer 1

具有讽刺意味的是，.red 本身比全局选择器 .someForm form input.submit 更不具体。结果，您的提交按钮将从全局规则中继承灰色背景。

无论如何，您可以复制现有的全局规则（第一个），但将 .red 类选择器附加到此规则，并使其变为红色，如下所示：

.someForm form input.submit.red { background-color: red; }

将额外的 .red 类添加到此选择器中，使其比原始的 .someForm form input.submit 选择器更加具体。由于您的提交按钮具有两个类，因此将应用此新规则。

- BoltClock

---

我不确定是否可以将!important应用在.red类上作为答案发布，您能否参考一下？ - Joris Ooms

@cabaret：当然可以，但我会使用更具体的选择器。特定的.css文件无论如何都不能被修改。 - BoltClock

扩展BoltClock的答案，问题在于您选择器的“特异性”（通俗地说，您的选择器不够具体）。 谷歌术语“CSS特异性”以获取有关特异性工作和计算的更多信息。 您可能还想了解CSS继承和级联等其他主题。 - Moses

Answer 2

原因是您指定的 global.css 选择器比特定选择器的层次结构更大。如果您将 someForm .red {background-color: red;} 放置在其中，它将起作用。或者您可以使用 {background-color: red !important;}，但这是一个永久性的覆盖。

- brenjt

---

.someForm .red 不起作用，它不够具体以覆盖原始样式。 - BoltClock

Answer 3

全局样式表中的选择器比特定样式表中的选择器更加具体，因此它具有优先权。然而，您可以在特定样式表中的值上应用 !important 标志，以使其具有优先权，如下所示： .red{background-color:red!important}

- DavidJCobb

---

特定的.css文件不得被更改。 - BoltClock

我的错误。他在我回答几分钟后编辑了他的问题。 - DavidJCobb