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

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

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

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

我认为你太具体了

Updated：原始答案没有直接子选择器来防止子选择器元素传播到孙子等。

我相信这把小提琴显示您想要的内容。无论配置如何，它都只是使用此代码来选择表格元素的角：

/* 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;
}

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