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

Question

我在一个HTML页面中有许多表格，其中一些仅使用和，其他一些则使用所有可能的元素：、、、、和。

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

因为这个特定的事情，我们需要获取四个角落的并将它们的特定角落圆形化。

如何编写一个单一的规则，只能选择表格中的第一行？

到目前为止，我正在使用以下规则：

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/)

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

附注：我可以更改表格的元素，但这将导致第三方库进行大量重构，因此我们不想更改它。

- Nicos Karalis

---

我认为仅使用CSS无法实现。你有jQuery可用吗？ - isherwood

我宁愿只使用CSS，但如果这是唯一的选择，我更倾向于改变表格并面对重构。 - Nicos Karalis

你的代码片段没有清晰地展示问题描述。你只想选择整个表格中第一行的第一个和最后一个单元格，无论该行是否在thead、tbody或tfoot中吗？那么最后一行呢？如果既有表头单元格又有数据单元格，你需要做什么？ - BoltClock

假设他想要突出显示表格角落的单元格，而不管thead、tbody和 tfoot等表格包装器。 - danijar

Answer 1

我认为你过于具体了

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

我相信这个示例展示了你想要的内容。它只使用以下代码选择表格元素的角落，无论其配置如何：

/* 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`来缩小选择范围，但关键是要保持子选择器的模糊性。

- ScottS

---

这种方法会在表格单元格中嵌套HTML元素时破坏标记。 - danijar

@danijar：好主意，我需要更新直接子选择器。 - ScottS

Answer 2

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

*选择器只是选择所有元素。但是>意味着仅将效果应用于直接子元素。因此，我们获取上述所有表格包装元素。不会影响table的更深层次的子元素，例如tr或td。

为了包含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;
}

我基于您在问题中提供的代码制作了一个工作演示。

无论如何，您还没有告诉我们您需要这个程序是做什么的，可能有更好的方法可以实现。例如，如果您想提供圆角，可以将效果应用于包装

的元素。

- danijar

Answer 3

你可以像这样处理线程情况：

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

然而，我不知道你如何处理tfoot的相同情况。你可能需要使用脚本。

- isherwood

---

有一个小技巧吗？这是一个基本的兄弟选择器。 - isherwood

好的，现在我明白了，让我检查一下。 - Nicos Karalis

好的，我成功地选择了表格的第一行（http://jsfiddle.net/NicosKaralis/DamGK/2/），但现在，我该如何只选择底部的那些行呢？ - Nicos Karalis

引用我自己的话，“我不知道你如何处理tfoot的相同情况”。 :-) 问题在于你无法使用CSS选择前一个兄弟元素。 - isherwood

显然，使用CSS4，我们可以使用div！li + p.something，这将保持div的范围，但是...这仅适用于尚不常见的CSS4。 - Nicos Karalis

没有必要为所需的效果覆盖样式，因此您应该避免这样做。 - danijar