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

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

您的select或应该是：

.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

CSS nth-child 无效

CSS nth-child does not work

css

css-selectors