Question

我在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。：我可以更改表格的元素，但它会在第三方库中进行更多的重构，所以我们不想改变它。

Answer 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;
}

当然，如果你的table.unit课程被放在.unit以外的其他元素上，你可以使用table来稍微缩小选择范围，但关键是让孩子选择器模糊不清

Answer 2

你可以处理这样的问题：

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

但是，我没有看到你如何处理tfoot的相同情况。您可能需要使用脚本。

Answer 3

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

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

要同时包含th和td，我们再次使用*和>来获取表格行的所有直接子项，无论它们是否为{{ 1}}或th。您可以改为为两者定义选择器。

td

我根据您在问题上提供的代码制作了working demo。

无论如何，你还没有告诉我们你需要什么，可能有更好的方法来实现这一目标。例如，如果要提供圆角，可以将效果应用于包装div的.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; }元素。

仅选择带有css的表中的第一行

3 个答案:

我认为你太具体了