Question

例如，我有一个字体颜色设置为紫色的div，div中的一些文本继承颜色，但有些不是，例如。在桌子上。

<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>

如果我用身体替换div，他们会继承。 test2

<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>

我想知道：

为什么以及如何不从父容器继承样式？
是否有替代方法使内容元素继承字体颜色，就像它们从正文继承一样？

Answer 1

这个＆＃39;问题＆＃39;是因为您尚未申报doctype，导致浏览器以Quircks模式运行。

这就是你在这里看到的结果：table元素获得了color: -webkit-text;样式，它覆盖了父div的继承。

添加：

<!DOCTYPE html>

文档顶部的

将导致浏览器呈现您想要的页面。

Answer 2

为什么以及如何不从父容器继承样式？

似乎浏览器特定的样式正在应用于<table>元素。
是否有替代方法使内容元素继承字体颜色，就像它们从正文继承一样？

要覆盖此内容，只需将以下内容添加到您的css
即可
```
table{
 color:inherit;
}
```

Answer 3

试试这个

将css添加到表中

     <style> 
         #divc,table{
        color: purple;
        } 

        </style>

    <div id="divc">
      <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>

http://jsfiddle.net/T7JBB/

Answer 4

您的css样式会被您拥有的另一个样式表中的表css覆盖。

color is set by webkit

将此添加到您的css文件

#purple, table{
    color: purple;
}

或让表继承你div的css

table {
   color: inherit; 
}

这是你的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>

以下是一个工作示例：http://jsfiddle.net/36aZ8/

表中的字体颜色不会从父div继承

4 个答案: