关于覆盖样式的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;}默认值.在具体的CSS中,我有.red {background-color: red;}

我在global.css之后调用了specific.css,但按钮没有变红.我保持默认的灰色"ccc".我无法编辑specific.css或编辑旧的global.css样式.(旧代码依赖于它.)我只能向全局添加新的CSS.有什么东西可以让按钮变红吗？

Answer 1

具有讽刺意味的是,.red它本身是一个不太全球的选择.someForm form input.submit.因此,您的提交按钮将改为采用全局规则的灰色背景.

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

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

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