我该如何覆盖css属性？

Question

假设我有一个全局css文件，global.css：

.my-class {
    background-color:red;
}

我需要一个特定的css文件specific.css，仅适用于某个html文件。此html文件也有class名为my-class。但是，在这段时间里，我想将此html的背景色设为蓝色。我怎样才能在specific.css文件中执行此操作？

Answer 1

有几种方法可以做到这一点。

选项＃1 是为了确保您的specific.css文件包含在全局文件之后。这将导致样式被覆盖。

例如：

<link href="global.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" />

选项＃2 是利用CSS特异性。

有关详细信息，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

选项＃3 是在您希望优先使用的样式中使用!important。

这并不是强烈推荐的，但如果上述两个选项无法满足您的需求，则可以使用。

Answer 2

如果您在background-color之后加载的CSS文件中定义了其他元素global.css（例如在HTML标记中specific.css之后加载global.css） 。您还可以使用!important标记覆盖所有其他已定义的样式，但通常您不需要这样做。它被称为级联样式表是有原因的。