选择器正在看孩子们和孙子孙女,而不仅仅是孙子孙女?

时间:2012-01-16 19:56:08

标签: css css3 css-selectors

我有以下选择器,它们用于为表格中的第一行提供正确的border-radius属性:

table.alt tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

这个想法是允许第一排出现的任何东西,无论是在桌面还是桌面上,都要用左上角和右上角所需的边框半径进行适当的风格化。我希望通过排除thead / tbody / tfoot部分,它只会查找表中找到的第一个表行,但似乎并非如此。它一直希望分别与thead / tbody / tfoot中的每一个匹配第一个表格行。所以它似乎更像这样运行选择器:

table.alt > * > tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt > * > tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt > * > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

使用*:not(tfoot)可以很容易地为表格页脚修复此问题,但仍然存在区分theadtbody元素的问题。虽然我的表的大多数都有一个表头,但所有都不会。

有没有办法解决这个难题,或者可能是将边界半径应用到桌子所有角落的更好方法?
注意:我会为每个表格单元格应用背景颜色,因此它会与外部表格的border-radius重叠。我还在最后一节中使用了*,以便它可以匹配thtd

1 个答案:

答案 0 :(得分:1)

Duh,修复它的简单方法。只需让第二部分看一下表格的第一个子节点,然后查看该部分的第一行......这也适用于做底角,而是查找该部分中的最后一个子节点和最后一行。

table.alt > *:first-child > tr:first-of-type > *:first-child { border-radius: 5px 0 0 0 }
table.alt > *:first-child > tr:first-of-type > *:last-child { border-radius: 0 5px 0 0 }
table.alt > *:first-child > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

我无法相信我花了很长时间才弄明白。看起来很草率,但它完成了工作。