我的CSS出了什么问题 - 选择它应该更多呢？

Question

<div id="top">
  <table>
    <tbody>
      <tr>
        <td>Cell number one content...</td>
        <td>Cell number two content...</td>
      </tr>
    <tbody>
  </table>
</div>

据推测，这个CSS应该选择整个第一个单元格蓝色和第二个红色：

  div#top table tbody tr:first-child {
      background-color:blue;
   }
   div#top table tbody tr + tr {
      background-color:red;
   }

相反，这是发生的事情：

Answer 1

不完全。 ：在你的情况下，第一个孩子意味着“一个TR，这是一个TBODY的第一个孩子”。它并不意味着“TR的第一个子元素”（TD）。

因此，你将蓝色应用于表格行，而不是第一个恰好是tr的孩子的td。

如果你只想要第一个td，那么：

div#top .... tr td:first-child { background-color: blue; }

Answer 2

如果要替换行颜色，也可以使用CSS3：

tr:nth-child(odd)    { background-color:#eee; }

tr:nth-child(even)    { background-color:#fff; }

Answer 3

如果您只想要第二胎，则需要使用nth-child(2)。您现在使用的是tr + tr影响tr之后的每个tr，或者tr之后的每个{{1}}。

Answer 4

第一列使用td:nth-child(1)，第二列使用td:nth-child(2)。

div#top table tbody tr:nth-child(1) td:nth-child(1) {
      background-color:blue;
   }
   div#top table tbody tr:nth-child(1)  td:nth-child(2) {
      background-color:red;
   }

Answer 5

您是否尝试过使用nth-child？：

div#top table tbody tr:nth-child(2) { 
  background-color:red; 
} 

这是一个jsFiddle：http://jsfiddle.net/HGdzx/