什么是 CSS Reset
在前端开发中，网页在不同的浏览器中会显示不同的效果，这是因为不同浏览器有不同的默认样式，而这些默认样式可能会对网页的显示产生影响，甚至会导致页面错乱。
为了解决这个问题，有些开发者会选择使用 CSS Reset。CSS Reset 是一种将所有浏览器默认样式重置为统一的基础样式，从而消除不同浏览器样式差异的技术手段。
但是，CSS Reset 会将所有样式都重置为基础样式，这样就会导致网页失去了原有的样式，所以我们需要在 CSS Reset 后继承部分样式。
继承部分样式
重新设置一些属性
一些属性，如字体、背景色等，我们可能不希望被重置，因此可以在 CSS Reset 后重新设置这些属性，让它们保持原有样式。
-- -------------------- ---- -------
-- --- ----- --
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- -------- --
---- -
------------ ------ -----------
----------------- --------
-
- -
------ --------
-使用子选择器
可以使用子选择器来继承部分样式，例如，下面代码中，当 div 标签下的 a 标签被悬停时，文字颜色会变成红色：
-- -------------------- ---- -------
-- --- ----- --
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ------ --
--- ------- -
------ ----
-使用类选择器
可以使用类选择器来继承部分样式，例如，下面代码中，我们给 a 标签添加了一个新的类名 link，然后为该类名设置了样式：
-- -------------------- ---- -------
-- --- ----- --
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ------ --
------ -
------ --------
-总结
在使用 CSS Reset 的时候，我们可以重新设置一些属性，或者使用子选择器或类选择器来继承部分样式。当然，在实际项目中，我们可能需要根据实际情况选择不同的方法来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64926e4c48841e989403d4a6