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样式。（旧代码依赖于它。）我只能向全局添加新的CSS。我有什么办法可以让按钮变红吗？

Answer 1

具有讽刺意味的是，.red本身是一个 less 特定的选择器而不是全局.someForm form input.submit。因此，您的提交按钮将改为采用全局规则的灰色背景。

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

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

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

Answer 2

原因是您指定了global.css的选择器具有比特定的更大的层次结构。如果你要放置。 someForm .red {background-color: red;}它会奏效。或者您可以使用{background-color: red !important;}，但这是永久覆盖。

Answer 3

global.css中的选择器比specific.css中的选择器更具体，因此它具有优先权。但是，您可以将!important标志应用于specific.css中的值，以使其优先，如下所示：

.red{background-color:red!important}