为什么嵌套在父级div/class内的元素仅继承部分CSS属性？

你遇到的现象是CSS的继承规则和层叠优先级共同作用的结果，核心逻辑如下：

• color和font-weight都属于默认支持继承的CSS属性，不存在部分属性不继承的问题，差异来自样式覆盖。
• 你在.box-1的样式规则中显式声明了color: #ffffff，该规则的优先级远高于从父元素.container继承而来的color: red，因此.box-1本身的文本颜色为白色，其内部的h1、p标签会继承.box-1的白色，自然不会显示红色。
• 你没有为.box-1声明font-weight属性，因此.box-1会直接继承父元素.container的font-weight: bold，并将该属性传递给内部子元素，所以加粗效果可以正常生效。

你可以通过浏览器开发者工具的元素样式面板验证这一点：选中.box-1内部的p标签，在样式列表中能看到被划掉的、继承自.container的红色属性，说明继承是生效的，只是被更高优先级的样式覆盖了。如果删除.box-1规则中的color声明，内部文本就会按照预期显示为红色。

内容的提问来源于stack exchange，提问作者GoldNova