CSS 如何选择不是第一个 tr 而不是最后一个 td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9362800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select not first tr and not last td
提问by Gian
#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>I managed to hover row 2 and 3 but while hover on 2 and 3, how can I skip the td (X). Preferable not using jQuery selector.
我设法悬停在第 2 行和第 3 行，但是悬停在第 2 行和第 3 行时，我如何跳过 td (X)。最好不使用 jQuery 选择器。
回答by scessor
Use the :not(), :first-childand :last-child.
使用:not()、:first-child和:last-child。
#myTable tr:not(:first-child):hover td:not(:last-child) {
background: #dfdfdf;
}
Also see this example.
另请参阅此示例。
回答by tkone
If you're looking to not apply something to the first and last children, you can use the :first-childand :last-childselectors to override the styles.
如果您不希望将某些内容应用于第一个和最后一个孩子，您可以使用:first-child和:last-child选择器来覆盖样式。
#MyTable tr, tr:hover {
background: #dfdfdf;
}
#MyTable tr:first-child, tr:last-child {
background: #000;
}
This won't work in IE until IE 9 though.
这在 IE 中不起作用，直到IE 9。
回答by Pete
I found this SO link because I did not want my header row to highlight when I hovered over it. The solution I came up with was to use <thead>and <tbody>tags and apply css to the rows within <tbody>.
我找到了这个 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>
回答by ЫъГЬ
:not(:first-child)and :not(:last-child)should do the trick, it seems those are supported by all latest browser.
If you need IE<9 support you can add classes, or replace td's with th's
:not(:first-child)并且:not(:last-child)应该可以解决问题，似乎所有最新浏览器都支持这些。如果您需要 IE<9 支持，您可以添加类，或将td's替换为th's
