html – 关于覆盖样式的CSS问题

我有两个css文件,global.css和specific.css

在我的HTML中我有

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

在global.css中,我有.someForm形式的input.submit {background-color：#ccc;}作为默认值.
在specific.css我有.red {background-color：red;}

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

解决方法

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

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

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

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