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

概述我在 HTML页面中有很多表,其中一些只使用tr&其他人正在使用他们所能做的一切：thead,tbody,tfoot,tr,th& TD. 因为一些问题我们使用CSS规则来制作表格的左上边框和每个td都有自己的右边框和下边框. 因为这个特殊的东西,我们需要在所有四个角落中获得td并围绕它们的特定角落. 如何才能执行只能选择表中第一行的单个规则？ 到目前为止,我正在使用此规则： table.unit 我在 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类被放在除了表之外的其他元素上以稍微缩小选择范围,但关键是要让子选择器保持模糊.

总结

以上是内存溢出为你收集整理的html – 仅选择带有css的表中的第一行全部内容，希望文章能够帮你解决html – 仅选择带有css的表中的第一行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。