什么是 CSS Reset？
CSS Reset 是一种设置 CSS 样式的方法，旨在使不同浏览器的默认样式更加一致，从而减少浏览器之间的差异。CSS Reset 通过重置 CSS 属性的默认值来达到这个目的。
CSS Reset 的问题
虽然 CSS Reset 可以减少浏览器之间的差异，但它也会导致网站样式错乱。因为 CSS Reset 会重置所有 CSS 属性的默认值，从而使得网站的样式在某些情况下出现了异常，比如样式的大小、颜色、字体等等都会有所变化。因此，如果在使用 CSS Reset 时没有仔细考虑，就会导致网站样式错乱问题的出现。
如何解决 CSS Reset 导致的网站样式错乱问题？
1.理解 CSS specificity
CSS specificity（CSS 优先级）指 CSS 规则在相互冲突时的优先级。CSS specificity 的值越高，这条规则就越优先。CSS 选择符的优先级顺序是：!important > id 选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承的样式。
举个例子，如果我们有以下 CSS 代码：
h2 span {
color: red;
}
span {
color: blue;
}那么在对应的 HTML 代码中，<h2><span>...</span></h2> 的文字都将显示为 red。因为 h2 span 的 specificity 比 span 更高。
2.使用 normalize.css
normalize.css 是一个开源的 CSS Reset 库。它旨在保留浏览器的有用样式而非完全重置。normalize.css 还考虑了不同浏览器之间的差异，所以它具有更好的浏览器兼容性。
使用 normalize.css 可以保留一些浏览器自带的有用样式，从而避免 CSS Reset 导致的网站样式错乱。
3.使用 CSS Reset 库
除了 normalize.css 外，还有许多其他的 CSS Reset 库，如 Reset CSS、Eric Meyer's CSS Reset 等等。选择一款适合自己的 CSS Reset 库，并根据需求进行调整，可以有效地解决 CSS Reset 导致的网站样式错乱问题。
CSS Reset 示例代码
接下来，我们来看一些 CSS Reset 的示例代码。
使用 normalize.css
首先，我们来使用 normalize.css：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------- ---------------------
----- ---------------- -------------------------------------------------------------------------- --
-------
------
---------- -----------
-------
-------使用 Reset CSS
接下来，我们来使用 Reset CSS：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------- ----- -----------
-------
-- ----- --- --
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- --- ---- ------ --- --
---- -
----- -------- ----- ------ -----------
----------------- --------
------ -----
-
-- ------- ------ --
-- -
------- ---- -----
----------- -------
-
--------
-------
------
---------- -----------
-------
-------使用 Eric Meyer's CSS Reset
最后，我们来使用 Eric Meyer's CSS Reset：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
--------- ---- ------- --- -------------
-------
-- ---- ------- --- ----- ------------------------------------------- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ----------- -------
------- ------- ------- ----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-
-- --- ---- ------ --- --
---- -
----- -------- ----- ------ -----------
----------------- --------
------ -----
-
-- ------- ------ --
-- -
------- ---- -----
----------- -------
-
--------
-------
------
---------- -----------
-------
-------总结
在实际应用中，我们需要根据具体情况选择合适的 CSS Reset 方法，较好地解决 CSS Reset 导致的网站样式错乱问题。除此之外，理解 CSS specificity 并根据需要进行样式覆盖是关键步骤。希望本文能对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afd54b48841e9894bffcfe