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

【问题标题】：How to select not first tr and not last td如何选择不是第一个 tr 而不是最后一个 td
【发布时间】：2018-07-30 22:01:51
【问题描述】：

#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 选择器。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

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

另见this example。

【讨论】：

:not 可悲的是直到 IE 9 才起作用。 quirksmode.org/css/contents.html，然后:last-child 和:first-child 也不行...

【解决方案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.

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

:not(:first-child) 和 :not(:last-child) 应该可以解决问题，似乎所有最新浏览器都支持这些。如果你需要 IEth's 替换 td's

【讨论】：