在 Web 开发中，CSS 是其中一项重要的技术，能够给网页设计提供非常灵活的样式控制。不过，不同的浏览器和操作系统往往有不同的默认样式，这可能会影响到网页设计的统一性和美观度。为了解决这个问题，就出现了 CSS Reset。
CSS Reset 是一种 CSS 样式表技术，透过设置默认样式，以达成在不同的浏览器和操作系统之间展示相同的网页效果。但在使用 CSS Reset 时，需要注意选择器优先级的问题。
选择器优先级
当多个 CSS 规则具有相同的权重（即都是行内样式、ID、class、标签等级别），就需要优先级来决定哪一个优先生效。主要由以下属性组成：
- Important，被标记为 !important 的样式会覆盖其它优先权
- 行内样式，具有最高的优先级
- ID 选择器，具有更高的优先级
- Class 选择器和属性选择器，具有一般的优先级
- 标签选择器，具有最低的优先级
在使用 CSS Reset 时，应该充分了解不同选择器的优先级，以确保已经设置的样式不会被无意间重置或覆盖。此外，还应该注意不要过度使用 !important 标记，否则可能产生不必要的样式冲突。
一个示例
下面是一个简单的示例，用来说明在使用 CSS Reset 时注意选择器优先级的问题。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------- --
----- ---------------- ---------------- --
-------
------
--------- -----------
-- -------------------------
-- ------------------------
-------
-------reset.css
-- -------------------- ---- ------- -- ----- ---- -- - - ------- -- -------- -- - -- ------ -- - - ---------- ----- -
style.css
-- -------------------- ---- ------- -- ---- -- - - ------ ------ - -- -- --- -- ------ - ------ ------ - -- ----- --- -- ---- - ------ ---- -
按照上面的代码，在浏览器中打开该 HTML 文件，可以看到 "Hello World!" 和两个段落文字。其中红色段落使用了一个 class 名称为 "red"，绿色段落使用了一个 ID 名称为 "green"。
如果这时没有使用 CSS Reset，应用默认样式表，那么红色段落应该是黑色的，而绿色段落应该是绿色的。
但实际情况中，为了解决浏览器默认样式的问题，我们需要使用 CSS Reset，以达到统一样式的目的。在上面的例子中，reset.css 设置了所有元素的 margin 和 padding 为零，并覆盖了所有段落文字的 font-size 为 16 像素。
这时，如果直接将所有段落的颜色设为 black，加上去会发现红色段落的文字颜色没有变化，绿色段落呈现为 black。
这是因为在 style.css 中指定颜色的选择器没有达到预期的优先级。在这个例子中，唯一可行的选择器是使用 ID 选择器：
#green {
color: green;
}这样一来，绿色段落的样式就能被准确地设置为绿色。
结论
尽管 CSS Reset 技术可以很好地解决浏览器默认样式的问题，但在使用时需要注意选择器优先级的问题。正确地使用选择器和避免 !important 标记可以大大减少样式冲突和维护成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f146446fbf96019738f7ca