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

Question

我正在编写使用服务器CSS的HTML页面（ <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/cs"> ）我想用本地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特异性

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文件中都存在任何属性，则只有第二个css文件中的属性有效，即您的style.css文件将生效。 另一方面，如果您的css和框架css都具有不重叠的类样式的属性，即框架css为该类设置了属性“ A”，而您的css为同一类设置了属性“ B” ，该类将继承属性A和B。

请阅读以下内容以获取更多详细信息： 定义相同类的两个CSS文件

另外，请阅读有关完全覆盖css样式的问题，目前看来这是不可能的： 整个（完全）覆盖CSS样式