使用css仅选择表格中的第一行

Posted 2023-03-06

【中文标题】使用css仅选择表格中的第一行

【英文标题】：Select only the first row in a table with css

【发布时间】：2013-03-09 15:54:33

【问题描述】：

我在一个 html 页面中有很多表格，其中一些只使用 tr & td 其他人正在使用他们可以使用的所有东西：thead, tbody, tfoot, tr, th & td。

由于某些问题，我们使用 CSS 规则来制作表格的顶部和左侧边框，并且每个 td 都有自己的右侧和底部边框。

因为这个特殊的东西，我们需要在所有四个角中获取td，并围绕它们的特定角。

我怎样才能做一个只能选择表中第一行的规则？

到目前为止，我一直在使用这条规则：

table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child 
  border-top-left-radius: 10px;

table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child 
  border-top-right-radius: 10px;

在这个 jsfiddle 你可以看到我的问题：(http://jsfiddle.net/NicosKaralis/DamGK/)

有没有办法同时解决这两个实现？ 如果有，我该怎么做？ 如果没有，您能帮我找出最好的方法吗？

P.S.：我可以更改表格的元素，但它会在第三方库中进行更多重构，因此我们不想更改它。

【问题讨论】：

我认为单独使用 CSS 是行不通的。你有 jQuery 吗？

我宁愿单独使用 css，但如果它是唯一的选择，我宁愿改变表格并面对重构

您的小提琴没有清楚地说明您的问题描述。您是否只想选择整个表格中第一行的第一个和最后一个单元格，而不管该行是在thead、tbody 还是tfoot 中？最后一行呢？如果同时存在标题单元格和数据单元格，您需要做什么？

我假设他想突出显示表格角落的单元格，而不管像 thead、tbody 和 tfoot 这样的表格包装器。

【参考方案1】：

我觉得你说得太具体了

更新：原始答案没有直接的子选择器来防止子选择器元素传播给孙子等。

我相信this fiddle 显示了您想要的。它只是使用此代码选择表格元素的角，无论配置如何：

/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */

    background: red;

当然，如果您的 .unit 类放在除 table 之外的其他元素上，您可以使用 table.unit 来稍微缩小选择范围，但关键是要使子选择器保持模糊。

【讨论】：

只要有 HTML 元素嵌套在表格单元格中，这种方法就会破坏标记。

@danijar：好电话，我需要使用直接子选择器进行更新。

【参考方案2】：

您可以像这样处理这些情况：

tr td:first-child, tr th:first child some styles
thead + tbody tr td:first-child revert the above styles

但是，我不知道您会如何处理 tfoot 的相同情况。您可能需要使用脚本。

【讨论】：

有小提琴吗？这是一个基本的兄弟选择器。

好的，我知道了，让我检查一下

好的，我设法只选择了表格的第一行 (jsfiddle.net/NicosKaralis/DamGK/2)，但是现在，我怎样才能只选择底部的那些？

引用我自己的话，“我不明白你会如何为 tfoot 处理同样的情况”。 :-) 问题是你不能用 CSS 选择 previous 兄弟。

显然我们可以使用 css4，使用：div! li + p.something 这将保持 div 的范围，但是......这仅适用于尚不常见的 css4

【参考方案3】：

您不必更改表格的结构。它们符合 HTML 标准，并且有一个解决方案使用干净的 CSS 来获得您询问的效果。在表格包装元素thread、tbody 和tfoot 上使用:first-child 和:last-child 允许您仅获取整个表格角落的单元格。以下是详细信息。

* 选择器只选择所有元素。但是> 是仅将效果应用于直接子级的意思。因此，我们获取上面列出的所有表格包装元素。没有像 tr 或 td 这样的 table 的更深层次的孩子受到影响。

要同时包含th 和td，我们再次使用* 和> 来获取表行的所有直接子代，无论它们是th 还是td。相反，您可以类似地为两者定义选择器。

.unit > *:first-child > tr:first-child > *:first-child,
.unit > *:first-child > tr:first-child > *:last-child,
.unit > *:last-child  > tr:last-child  > *:first-child,
.unit > *:last-child  > tr:last-child  > *:last-child 
    background: red;

我根据您在问题中提供的代码创建了working demo。

无论如何，您还没有告诉我们您需要这个做什么，并且可能有更好的方法来实现这一点。例如，如果您想提供圆角，您可以将效果应用于包装 div 的 table 元素。