在前端开发中，CSS Reset 是一个常见的技术，它可以帮助我们消除浏览器默认样式对网页样式的影响。然而，有时候我们会发现，在使用 CSS Reset 之后，子元素的字体继承却出现了问题。本文将介绍这个问题的原因以及解决方法。
问题描述
假设我们有如下 HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------------
-------
------
---- ---------------
--------------
------
-------
-------我们想要设置段落字体的大小为 16px，于是写出如下 CSS 代码：
p {
font-size: 16px;
}但是，当我们在页面中使用了 CSS Reset 之后，子元素的字体大小却变成了默认值，而不是我们期望的 16px。这是因为 CSS Reset 会重置所有元素的样式，包括字体大小。
解决方法
为了解决这个问题，我们可以使用如下的 CSS 代码：
.parent {
font-size: 16px;
}
.parent * {
font-size: inherit;
}这段代码的含义是，首先将父元素的字体大小设置为 16px，然后将所有子元素的字体大小设置为继承自父元素的字体大小。这样，我们就可以保证子元素的字体大小正确继承了父元素的字体大小。
示例代码
下面是一个完整的示例代码，包括 CSS Reset 和解决方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- -------------
-------
-- --- ----- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- ---
-------- ------ ------- -------- ------
------- ----------- ------- ------- -------
----- ---- ------- ----- -------- --------
----- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ---- --
------- -
---------- -----
-
------- - -
---------- --------
-
-- ---- --
- -
-------------- ----
-
--------
-------
------
---- ---------------
--------------
------
-------
-------总结
在使用 CSS Reset 的时候，我们需要注意子元素的字体继承问题。通过设置父元素的字体大小，并使用 font-size: inherit; 让子元素继承父元素的字体大小，我们就可以解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a76bceb4cecbf2dfa3dd9