CSS nth-child不起作用

Question

我知道这个问题已被多次询问但无论如何我无法弄清楚问题，所以这是我的HTML：

    <table class="UMLTable">
        <tr>
            <th>Table<th>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        <tr>
            <td>Attribute 1<td>
        </tr>
        </tr>
    </table>

为什么这条线不起作用：

.UMLTable td:nth-child(even){
    background-color:blue;
}

Answer 1

您需要选择第n个tr元素而不是子td元素。

你的选择器应该是：

.UMLTable tr:nth-child(even) td {
    background-color:blue;
}

CSS未按预期工作的原因是因为td元素不是兄弟。

.UMLTable tr:nth-child(even) td {
  background-color: blue;
}

<table class="UMLTable">
  <tr>
    <th>Table
      <th>
  </tr>
  <tr>
    <td>Attribute 1
      <td>
  </tr>
  <tr>
    <td>Attribute 1
      <td>
  </tr>
  <tr>
    <td>Attribute 1
      <td>
  </tr>
  </tr>
</table>

Answer 2

尝试使用tr元素代替td，如下所示：

.UMLTable tr:nth-child(even) td {
    background-color:blue;
}

<强> JSFIDDLE DEMO