为何.table tr选择器仅使th文本居中，却能为th/td修改文字颜色？

先看用到的代码：

CSS 代码 #

.table tr {
   text-align: center
}

HTML 代码 #

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

遇到的问题：
用上面的CSS时，只有<th>的文本居中，<td>没反应；但把text-align换成color（你写的text-color是笔误，正确属性名是color），<th>和<td>的文字颜色都会跟着变，这是为啥？

核心是CSS继承规则和浏览器默认样式的优先级差异：

• 关于color：这个属性是CSS默认会被子元素继承的属性，给父元素tr设置后，它下面的<th>和<td>都会自动继承这个颜色值，所以两者颜色都会变化。
• 关于text-align：它虽然也是可继承属性，但浏览器给<td>自带了默认样式（称为user agent样式），这个样式的优先级比「从父元素继承来的样式」更高。浏览器默认给<td>的text-align值是left，所以就算tr设了center，<td>还是会用自己的默认样式。而<th>的默认样式本身就是text-align: center，所以看起来像是你的CSS生效了，其实就算不写这段CSS，<th>本来也是居中的。

另外提个小细节：你的CSS选择器是.table tr，但HTML里的<table>没加table类名，不过这不是导致差异的关键——就算加上类名，<td>还是不会居中，问题根源还是浏览器默认样式的优先级。

要让<td>也居中，直接给<td>设置样式就行，比如：

.table td, .table th {
  text-align: center;
}

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