如何用内部/外部 CSS 覆盖在线 CSS

Question

我正在编写使用服务器 CSS (<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">) 的 HTML 页面 我想用本地 CSS 覆盖一些类样式。我在本地 CSS 中使用了 !important 但它不起作用。请提出建议。

Answer 1

在添加 css 时，首先添加框架 css，然后添加您的 css 文件

<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">
<link rel="stylesheet" href="style.css">

更多css specificity

Answer 2

HTML 页面从头到尾依次解析。因此，如果您在框架 css 之后添加 css，您的 css 将覆盖框架 css 中的属性，如下所示：

<link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs">
<link rel="stylesheet" href="style.css">

同时，您需要知道，如果您使用这种方法，如果两个 css 文件中都存在任何属性，那么只有第 2 个文件中的属性，即您的 style.css 文件才会生效。另一方面，如果您的 css 和框架 css 都具有不重叠的类样式的属性，即框架 css 具有为该类设置的属性“A”，而您的 css 具有为同一类设置的属性“B” ，该类将继承属性 A 和 B。

阅读本文了解更多详情：Two css files defining same class

另外，阅读这个关于完全覆盖 css 样式的问题，目前这似乎是不可能的：Entire (completely) overwrite CSS styles