如果你在开发网站时用过多种样式文件，你可能会遇到 CSS Reset 技术和跨域加载样式文件之间发生冲突的问题。这会使你的网站样式出现问题并且加大调试难度。下面我们就来详细介绍如何解决这个问题。
什么是 CSS Reset？
CSS Reset 技术指的是将浏览器默认样式（如边距、字体大小）归零的一种技术。不通过 CSS Reset 技术，浏览器的默认样式难以预测，网站就很容易出现大量兼容性问题。经过 CSS Reset 技术处理，我们就可以用更加规范的方式完成网站布局和样式设计。
下面以 Normalize.css 作为 CSS Reset 库，为大家演示如何使用 CSS Reset 技术。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------------
----- -------------------- -----------------
----- ---------------- -----------------
-------
------
---------- -----------
---------- ------------------
-------
-------如果你想用 Normalize.css 作为样式文件，只需要按照上述示例链接即可。
什么是跨域加载的样式文件？
大多数情况下，我们的样式文件都是存放在与网页同一服务器中，但有些情况下（比如内容分发网络），我们需要从其他域名获得 CSS 样式表。当我们向其他域名请求样式表时，就产生了所谓的跨域读取 CSS 文件。这时候就会遇到跨域阻止和样式文件无法加载等问题。
下面以百度的 CDN 服务器为例，为大家演示如何使用跨域加载样式文件。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------
----- -------------------------------------- -----------------
-------
------
---------- -----------
----------------------
-------
-------从上述示例代码可以看出，我们只需要加上样式表的 CDN 路径即可完成跨域加载。
解决方案
当我们同时使用 CSS Reset 技术和跨域加载样式文件时，就可能遇到样式冲突的问题。这时我们需要进行一些特殊的处理方案，以消除样式冲突带来的负面影响。
解决方案之一是将 Reset 样式文件与主样式文件分开加载，避免两者之间的冲突。如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- - ------------------
----- -------------------- -----------------
-------
------
---------- -----------
--------- ----- -------------------------
----- -------------------------------------- -----------------
-------
-------我们将 Reset 样式文件放在主样式文件之前加载，这样就可以避免两者之间的冲突。
解决方案之二是增加样式选择器的权重，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- - ------------------
----- -------------------- -----------------
------ ----------------
-- -
-----------------
---------------
-
--------
-------
------
---------- -----------
--------- ----- -------------------------
----- -------------------------------------- -----------------
-------
-------我们在 HTML 文件中增加一段<style>标签，将样式选择器的权重增加即可消除样式冲突。</p> <h2>结论</h2> <p>如果你在网站开发过程中使用了 CSS Reset 技术和跨域加载的样式文件，并经常出现样式冲突的问题，那么本文所介绍的两种解决方案一定能帮到你。我们希望本文能够对你有所启发，让你在网站开发过程中少踩坑，少走弯路。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/6715a7d1ad1e889fe2184eae">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/6715a7d1ad1e889fe2184eae">https://www.javascriptcn.com/post/6715a7d1ad1e889fe2184eae</a></p> </blockquote>