Question

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

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

但是，每个按钮都是红色的，并且它们都具有相同的tr td：nth-child（单数）按钮{}样式。这些按钮在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

删除css中的按钮

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

Answer 3

转发器正在创建一个这样的结构（显然）：

<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;
}

Nth-child适用于每个按钮

3 个答案: