Что не так с моим 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

Не совсем. : first-child в вашем случае означает «TR, который является ПЕРВЫМ РЕБЕНКОМ TBODY». это не означает «первый дочерний элемент TR» (TD).

Таким образом, вы применяете синий цвет к строке таблицы, а не первый тд, который является потомком tr.

если вы хотите только первый тд, то:

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

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

Вот jsFiddle: http://jsfiddle.net/HGdzx/

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(2).То, что вы используете сейчас, tr + tr влияет на каждый tr, который следует за tr, или каждый tr после первого.