前言
在前端开发中，样式是一个需要注意的关键点。如果没有经验或者没有系统的学习过，很容易出现样式混乱、重复、覆盖等问题。其中之一就是在嵌套结构中，元素之间的样式会相互影响，造成不一致或不可预计的问题。在这种情况下，我们可以利用 CSS Reset 来对元素进行重置，使其在样式表中的属性表现一致。
CSS Reset 是什么？
CSS Reset，中文翻译为“样式重置”，是一种利用 CSS 的全局重写规则将所有元素的默认样式设为相同的基础样式，以解决浏览器之间的差异而出现的技巧。
在 CSS Reset 中，我们会将所有的元素样式属性重置为初始值。这样，我们可以更好的实现我们自己想要的样式，并且避免与默认样式的冲突。CSS Reset 可以帮助我们确保网站在不同浏览器和操作系统中的显示效果一致。
为什么要使用 CSS Reset？
使用 CSS Reset，我们可以保证网站在不同浏览器中表现一致。如果我们不使用 CSS Reset，那么元素在不同浏览器中的默认样式可能会不同，这样就会让我们的样式难以掌握和维护。
另一方面，使用 CSS Reset 还可以提高开发效率。当我们使用 CSS Reset 时，我们不用考虑不同浏览器之间的差异，只用考虑我们想要的样式，这样就可以省去很多琐碎的工作。
使用 CSS Reset 实现无限层级嵌套结构的网站主体样式
使用 CSS Reset 实现无限层级嵌套结构的网站主体样式，主要的思路是将所有元素的默认样式全部重置为一致。这样，在添加样式时，我们就可以控制样式的细节。
以下是一个示例代码：
-- -------------------- ---- ------- -- ------------- -- ---- - ------------ ----- ------------------------- ----- - ---- - ------- -- - ---- - -------- ------ - -- - ---------- ---- ------- ------ -- - -- - ----------- ------------ ------- -- --------- -------- - --- - ------------ ---------- ---------- ---------- ---- - - - ----------------- ------------ - -- ---------- -- ----- ---- - ------- ----- ------ ----- - ---- - ---------- ----- ------------ ------ ----------- ------ ----- - --- --- --- --- --- -- - ------------ ----- ------- -- - ---------- - ---------- ------ ------- - ----- -------- - ----- - ----------- - -------- --- ------ ----- -------- ------ - ---- - ------ ----- - ------ - ------ ------- - --- ------- - ------ ----- -
如上所示，我们可以在 Custom.css 中添加我们自己的样式，其中元素的默认样式已经在 Normalize.css 中被重置了。
总结
使用 CSS Reset 可以帮助我们重置元素的默认样式，以便我们可以更好地控制网站的样式。在实现无限层级嵌套结构的网站主体样式时，我们只需要合理地使用 CSS Reset，然后在自己的样式中完成所需的样式即可。在实际开发中，我们应该做到熟练运用 CSS Reset，并在样式细节上严格把握，这样可以保证网站在不同浏览器和操作系统中的表现都一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653318217d4982a6eb669875