与重复的通知相反 ,这个问题不是重复的。 声称的副本没有解决嵌套的问题,这在我的问题中已经清楚地解释了。
我有一个表格,行可以有两个类中的一个: parent或child 。 有些父母有很多孩子,有些则没有孩子。 表格的HTML结构是扁平的,不能表示行之间的层次关系; 父母和孩子都是tr s。 例:
Parent A Child 1 Child 2 Parent B Parent C Child 1我想对行进行条纹处理,以便奇数和偶数父行具有一种颜色,并且它们各自的子元素将具有较浅的父颜色。
请参阅包含的片段,了解我想要实现的一个示例。
table { border-collapse: collapse; width: 100%; } td { border: 1px solid #eee; padding: 10px; } .parentOdd { background-color: #eb94fa; } .parentEven { background-color: #c294fa; } .oddChild { background-color: #f2c4fa; } .evenChild { background-color: #d8bbfd; }<table> <tbody> <tr class="parentOdd"> <td>Parent A</td> </tr> <tr class="oddChild"> <td>A1</td> </tr> <tr class="oddChild"> <td>A2</td> </tr> <tr class="parentEven"> <td>Parent B</td> </tr> <tr class="parentOdd"> <td>Parent C</td> </tr> <tr class="oddChild"> <td>C1</td> </tr> <tr class="oddChild"> <td>C2</td> </tr> <tr class="parentEven"> <td>Parent D</td> </tr> <tr class="evenChild"> <td>D1</td> </tr> <tr class="evenChild"> <td>D2</td> </tr> </tbody> </table>我尝试使用CSS伪选择器,但没有运气。
.parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: blue; }第nth-child选择器忽略该类。 我尝试使用nth-of-type但也忽略了这个类。 而且,这两个伪选择器都无法处理孩子的情况。
我正在尝试在CSS中做什么? 或者我必须诉诸JavaScript?
Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question.
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example:
Parent A Child 1 Child 2 Parent B Parent C Child 1I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color.
Please see the included snippet for an example of what I'm trying to achieve.
table { border-collapse: collapse; width: 100%; } td { border: 1px solid #eee; padding: 10px; } .parentOdd { background-color: #eb94fa; } .parentEven { background-color: #c294fa; } .oddChild { background-color: #f2c4fa; } .evenChild { background-color: #d8bbfd; }<table> <tbody> <tr class="parentOdd"> <td>Parent A</td> </tr> <tr class="oddChild"> <td>A1</td> </tr> <tr class="oddChild"> <td>A2</td> </tr> <tr class="parentEven"> <td>Parent B</td> </tr> <tr class="parentOdd"> <td>Parent C</td> </tr> <tr class="oddChild"> <td>C1</td> </tr> <tr class="oddChild"> <td>C2</td> </tr> <tr class="parentEven"> <td>Parent D</td> </tr> <tr class="evenChild"> <td>D1</td> </tr> <tr class="evenChild"> <td>D2</td> </tr> </tbody> </table>I tried using CSS pseudo-selectors, but no luck.
.parent:nth-child(odd) { background-color: green; } .parent:nth-child(even) { background-color: blue; }The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children.
Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?
最满意答案
有没有理由不使用多个<tbody> ? 分组行可以使事情变得简单。
table { border-collapse: collapse; width: 100%; } td { border: 1px solid #eee; padding: 10px; } tbody:nth-child(odd) > tr { /* odd child */ background-color: #f2c4fa; } tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */ background-color: #eb94fa; } tbody:nth-child(even) > tr { /* even child */ background-color: #d8bbfd; } tbody:nth-child(even) > tr:nth-child(1) { /* even parent */ background-color: #c294fa; }<table> <tbody> <tr> <td>Parent A</td> </tr> <tr> <td>A1</td> </tr> <tr> <td>A2</td> </tr> </tbody> <tbody> <tr> <td>Parent B</td> </tr> </tbody> <tbody> <tr> <td>Parent C</td> </tr> <tr> <td>C1</td> </tr> <tr> <td>C2</td> </tr> </tbody> <tbody> <tr> <td>Parent D</td> </tr> <tr> <td>D1</td> </tr> <tr> <td>D2</td> </tr> </tbody> </table>Is there any reason not to use multiple <tbody>s? Grouping rows can make it easy.
table { border-collapse: collapse; width: 100%; } td { border: 1px solid #eee; padding: 10px; } tbody:nth-child(odd) > tr { /* odd child */ background-color: #f2c4fa; } tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */ background-color: #eb94fa; } tbody:nth-child(even) > tr { /* even child */ background-color: #d8bbfd; } tbody:nth-child(even) > tr:nth-child(1) { /* even parent */ background-color: #c294fa; }<table> <tbody> <tr> <td>Parent A</td> </tr> <tr> <td>A1</td> </tr> <tr> <td>A2</td> </tr> </tbody> <tbody> <tr> <td>Parent B</td> </tr> </tbody> <tbody> <tr> <td>Parent C</td> </tr> <tr> <td>C1</td> </tr> <tr> <td>C2</td> </tr> </tbody> <tbody> <tr> <td>Parent D</td> </tr> <tr> <td>D1</td> </tr> <tr> <td>D2</td> </tr> </tbody> </table>
更多推荐
发布评论