5

我在一个 HTML 页面中有许多表，其中一些只使用tr & td其他的正在使用他们可以使用的一切：thead, tbody, tfoot, tr, th & td.

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

因为这个特殊的东西我们需要td在所有四个角上都得到 's 并绕过它们的特定角。

如何执行只能选择表中第一行的单个规则？

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

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

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

PS：我可以改变表格的元素，但它会在第三方库中进行更多的重构，所以我们不想改变它。

4

3 回答 3

3

我觉得你说得太具体了

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

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

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

于 2013-04-11T15:52:56.867 回答
0

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

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

为了同时包含thand td，我们再次使用*with>来获取表行的所有直接子元素，无论它们是thor 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;
}

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

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

于 2013-04-11T16:12:01.480 回答
0

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

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

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

于 2013-03-20T14:01:43.987 回答