html - 如何覆盖 css 属性？

Question

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

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

我需要一个特定的css 文件，specific.css，只是为了某个html 文件。而这个 html 文件也有一个名为 my-class 的 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。

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