例如，我有一个字体颜色设置为紫色的 div，div 中的一些文本继承了颜色，但有些则没有，例如在一张 table 上。 (将以下代码保存为test.html，并在浏览器中打开进行测试)
<div style="color: purple;">
<p>Some text</p> <!-- text here is purple -->
<table>
<tr>
<td>Table cell 1</td> <!-- text here is NOT purple -->
<td>Table cell 2</td> <!-- text here is NOT purple -->
</tr>
</table>
Another text <!-- text here is purple -->
</div>
如果我用 body 替换 div，它们会继承。
<body style="color: purple;">
<p>Some text</p> <!-- text here is purple -->
<table>
<tr>
<td>Table cell 1</td> <!-- text here is purple -->
<td>Table cell 2</td> <!-- text here is purple -->
</tr>
</table>
Another text <!-- text here is purple -->
</body>
我想知道:
- 为什么以及如何不从父容器继承样式？
- 是否有其他解决方法可以使内容元素继承字体颜色，就好像它们继承自正文一样？
最佳答案
这个“问题”是因为您没有声明文档类型，导致浏览器以 Quircks 模式运行。
这样做的一个结果就是您在此处看到的情况:表格元素正在获取 color: -webkit-text; 样式，该样式覆盖了从父 div 继承的样式。
添加:
<!DOCTYPE html>
在文档顶部将使浏览器呈现您想要的页面。
关于html - 表格中的字体颜色不继承自父 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24258380/