为何容器div的class属性无法影响嵌套table元素的样式？

核心原因在于CSS继承规则和浏览器对表格元素的默认样式设置：

• 首先，color属于CSS可继承属性，<h1>这类普通块级元素会自动继承父元素（这里的<div class="test">）的color值，所以<h1>文字会变成蓝色。
• 但表格相关元素（<table>、<th>、<td>等）是特殊情况：浏览器的默认样式表（用户代理样式）中，会给这些元素的color设置默认值（通常为黑色）。这个默认样式的优先级高于从父元素继承来的样式，所以即便父级<div>有.test类的蓝色设置，表格内部文字也不会继承该颜色。
• 当把.test类移到<table>标签上时，.test的color: blue直接作用于<table>元素，此时表格内部的<th>、<p>等元素会继承这个蓝色（它们自身未被浏览器默认样式覆盖color属性），因此文字能正常显示蓝色。

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