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