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

发布时间：2020-12-14 23:21:20 所属栏目：资源来源：网络整理

导读：我在 HTML页面中有很多表,其中一些只使用tr其他人正在使用他们所能做的一切：thead,tbody,tfoot,tr,th TD. 因为一些问题我们使用CSS规则来制作表格的左上边框和每个td都有自己的右边框和下边框. 因为这个特殊的东西,我们需要在所有四个角落中获得td并围绕它

我在 HTML页面中有很多表,其中一些只使用tr&其他人正在使用他们所能做的一切：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.：我可以改变表格的元素,但它会在第三方库中进行更多的重构,所以我们不想改变它.

解决方法

我觉得你太具体了

更新：原始答案没有直接子选择器来保持子选择器元素不会传播给孙子等.

我相信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类被放在除了表之外的其他元素上以稍微缩小选择范围,但关键是要让子选择器保持模糊.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!