Question

#MyTable tr+tr:hover {
  background: #dfdfdf;
}

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

我设法将第2行和第3行悬停，但在2和3上悬停时，我怎么能跳过td（X）。最好不要使用jQuery选择器。

Answer 1

使用:not()，:first-child和:last-child。

#myTable tr:not(:first-child):hover td:not(:last-child) {
      background: #dfdfdf;
}

另见this example。

Answer 2

如果您不想对第一个和最后一个孩子使用某些内容，可以使用:first-child和:last-child选择器覆盖样式。

#MyTable tr, tr:hover { 
    background: #dfdfdf;
}

#MyTable tr:first-child, tr:last-child {
    background: #000;
}

在IE 9 though之前，这在IE中无效。

Unless you shim in some support

Answer 3

我找到了这个SO链接，因为当我在它上面盘旋时我不希望我的标题行突出显示。我提出的解决方案是使用<thead>和<tbody>标记，并将css应用于<tbody>中的行。

<style>
    .report tbody tr:hover {
        background-color: khaki;
    }
</style>

<table class="report">
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
        </tr>
    </tfoot>
</table>

Answer 4

:not(:first-child)和:not(:last-child)应该可以做到这一点，似乎所有最新的浏览器都支持这些技巧。如果您需要IE＆lt; 9支持，则可以添加课程，或将td替换为th＆＃39;

如何选择不是第一个tr而不是最后一个td

4 个答案: