HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供相关的知识，希望对你有一定的参考价值。
使用 CSS 突出显示悬停时的两个表格行
【中文标题】使用 CSS 突出显示悬停时的两个表格行【英文标题】：Highlight two table rows on hover with CSS 【发布时间】：2012-02-04 11:50:08 【问题描述】：在鼠标悬停时更改表格中一行的背景颜色非常简单，使用 CSS：
.HighlightableRow:hover
background-color: lightgray;
还有一些 HTML：
<table>
<tr class=HighlightableRow>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<tr>
<tr class=HighlightableRow>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<tr>
</table>
有时，当我将鼠标悬停在其中任何一行上时，我想突出显示一对行。例如，当在表格中显示工作订单列表时，我会有一行包含创建者、创建日期、紧迫性等，而第二行将包含所请求工作的例外。
除了使用 JavaScript onmouseover/onmouseout 事件处理程序之外，还有什么方法可以创建如上所示的这种效果？最好使用 CSS。
【问题讨论】：
【参考方案1】：使用 tbody 元素对行进行分组。
tbody:hover background:#eee;
HTML：
<table>
<tbody>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
</tbody>
</table>
查看有关“tbody”、“thead”和“tfoot”的详细信息以了解正确用法。
【讨论】：
这会突出显示所有行，而不仅仅是两行。 一张表中可以有多个 tbody。如果每个 tbody 中恰好有两行，那么他的解决方案将起作用。见：***.com/questions/3076708/…【参考方案2】：如果您满足于突出显示下一行，这实际上非常简单。
tr:hover, tr:hover + tr
background:#eee;
css + 选择器仅选择紧随其后的元素，如果它与您的类型匹配。所以在这种情况下，它会突出显示当前行以及下一行。
见jsFiddle
当然，如果您想将两个分组，则有限制，因为您不能执行“这一行和上一行”。在这种情况下，我可能会将这两行嵌套在第一行内的新表中。有意义吗？
编辑：像这样
HTML
<table>
<tr>
<td>
<table>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
tr:hover tr background:#eee;
工作fiddle
【讨论】：
您能否使用第一行的 + 选择器突出显示第二行，使用第二行的 - 选择器突出显示第一行？这几乎模仿了我现在使用 JavaScript 所做的事情。 很遗憾，没有。它只有一种方式，因为 CSS 无法选择前一个元素。但是您可以在 tr 中放置一个新表，并突出显示它。看看我更新的小提琴：jsfiddle.net/6TYBb/1 @Martin 否。由于 CSS 的工作方式，您不能选择上一个或父元素。这可能看起来很愚蠢，但从性能 POV 来看，这很有意义。 Johnathan Snook 写了一篇关于它的优秀文章：snook.ca/archives/html_and_css/css-parent-selectors 在不诉诸 JavaScript 暴力的情况下，唯一明智的做法是嵌套，正如我在上面的 Fiddle 中说明的那样。当您将鼠标悬停在底部两行中的任何一行时，它们都会突出显示，因为:hover 定位在父元素本身上。我希望这是有道理的。
遗憾的是，这不允许分组，并且在 tr 内添加表格会导致列对齐。【参考方案3】：
我不知道有一种方法可以使一个对象上的事件与 vanilla CSS 中的另一个对象进行交互。通常，当您想要连接此类自定义事件时，您会使用某种实际的逻辑编程语言（在本例中为 javascript）。
现在，如果你决定走那条路，我可以用一些非常简单的 jQuery 帮助你完成你所需要的 :)。 jQuery 的事件绑定模型实际上消除了 javascript 的很多痛苦。
【讨论】：
感谢您的回答。我其实很喜欢 JavaScript 的痛苦，但如果我改变看法，我会提出一个新问题。以上是关于HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供的主要内容，如果未能解决你的问题，请参考以下文章