为何对表格使用:nth-child(1)时样式未仅作用于首个单元格？

尝试用CSS选择器.header:nth-child(1)为class为header的<tr>设置浅绿色背景，结果整行单元格都变成了浅绿色，而非仅首个单元格，相关代码及效果如下：

代码示例 #

<!DOCTYPE html>
<html>
<head>
<style> 

.header:nth-child(1) {
  background: lightgreen;
}

</style>
</head>
<body>

 <table>
   <tr class="header">
     <th>Company</th>
     <th>Contact</th>
     <th>Country</th>
   </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table> 

</body>
</html>

效果截图 #

原因及解决办法 #

问题根源 #

你误解了选择器的作用对象：

• .header:nth-child(1)选中的是父元素的第一个子元素且带有header类的<tr>行元素，而非该行内的第一个单元格。
• 当给<tr>设置背景色时，这个样式会默认应用到它包含的所有<th>单元格上，因此整行都变成了浅绿色。

修正方案 #

如果要仅给header行的首个单元格设置背景，需要把选择器指向该行下的第一个<th>：

.header th:nth-child(1) {
  background: lightgreen;
}

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