为什么表格边框颜色继承了元素颜色？

Question

我只是注意到如果我将“tr”元素颜色设置为红色，那么“td”边框颜色也会设置为红色。这是浏览器的错误吗？

https://jsfiddle.net/tbgggu62/3/

<table>
    <tbody>
        <tr style="color: red;">
            <td >A</td>
            <td>B</td>
        </tr>
        <tr class="spaceUnder">
            <td>C</td>
            <td>D</td>
        </tr>
        <tr>
            <td>E</td>
            <td>F</td>
        </tr>
    </tbody>
</table>

感谢。

Answer 1

这不是一个错误。您已将var PersonalityStatusApp = React.createClass({ getInitialState: function () { return { data: dataInit }; }, componentWillMount(){ var self = this; this.setState({ data: this.props}); //changed this Votinghub.on("UpdateStatusLabel", function (data) { var obj = $.parseJSON(data); self.setState({ data: obj }); }); }, render: function () { return ( <div className="PersonalityStatusApp"> <label>{this.state.data.status}</label> </div> ); } }); 的颜色设置为tr，red从其父级继承td，因此也color。最后，您设置了red的{​​{1}}和border-style，但未设置border-width。 td defaults to currentcolor，这是元素的文字颜色：在本例中为border-color。

通过一系列继承和默认值，它按预期工作。

Answer 2

正如Joseph Marikle所说，默认情况下颜色是继承的。因为它被设置在tr级别，所以它下面的所有东西也将被设置为红色，除非你不想要它。

将文字保留为红色，但更改边框颜色使用此：

td {
  border-style: solid;
  border-width: 1px;
  border-color:black;
}

或使用速记（节省空间）

td {
  border:solid 1px black;
}

将边框设置为红色，但更改第一行中的文本颜色请执行以下操作：

td {
  border:solid 1px;
}

tr:nth-child(1) td{
  color:black;
  border: solid 1px red;
}