选择者看着孩子,然后是孙子,而不是孙子?
问题描述:
我有以下的选择,这是为了给一个表中的第一行适当的边界半径属性:选择者看着孩子,然后是孙子,而不是孙子?
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)
固定为表尾,但仍然是thead
和tbody
元素区分的问题。尽管我的表格中大部分都会有表格标题,而不是全部是。
有什么办法可以避开这种困境,或者是将边界半径应用于表格所有角落的更好的选择?
注意:我会为每个表格单元应用背景颜色,因此它与外部表格的边框半径重叠。我还在最后一节中使用*
,以便它可以匹配th
或td
。
答
杜,简单的方法来解决它。只要让第二部分看看表格的第一个孩子,然后看看该部分的第一行......这也适用于底部角落,而不是寻找该部分中的最后一个孩子和最后一行。
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 }
我不敢相信花了我很长时间才弄明白。看起来很sl but,但它完成了工作。