Nth-child 应用于每个按钮

Question

我正在尝试使用以下 css 对每个其他按钮执行不同的样式：

tr td:nth-child(odd) button {
   background-color: red;
}

但是，每个按钮都是红色的，并且它们都具有相同的 tr td:nth-child(odd) button {} 样式。 这些按钮是在 g:each 语句中“创建”的：

<table class="table table-striped">
<g:each in="${exactMatches}">
 <tr>
   <td>
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal${it.id}">
        ${it.name}
    </button>
    .
    . more stuff that appears in modal...
    .
  </td>
</tr>

Answer 1

看起来你所有的按钮都在一个 TD 中，所以你需要将你的 css 更改为：

tr td button:nth-child(odd) {
   background-color: red;
}

Answer 2

中继器正在创建这样的结构（显然）：

<tr>
    <td>
        <button></button>
    </td>
</tr>
<tr>
    <td>
        <button></button>
    </td>
</tr>
...

所以，nth-child 选择器应该在 tr 元素上，因为每个 tr 上只有一个 td：

tr:nth-child(odd) td button {
   background-color: red;
}

Answer 3

删除css中的按钮

td button:nth-child(odd) {
   background-color: red;//whatever colr
}