css - ajax加载时如何覆盖a的CSS？

Question

我在这里有一个示例，您可以单击一行并在其下方插入一个新行。新行包含一个新表。

见小提琴

正如您从上面的小提琴中看到的那样，每个表格分别在 CSS 上悬停。现在的问题是从父表悬停在第二个表上。

当悬停在新行上时，我宁愿覆盖父表的悬停效果，以便我可以看到子表的悬停效果：

我试图阻止父表的 CSS 像这样应用于新行：

table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
      background-color: #cfe2e8;  
}

正如您在这个新小提琴中看到的：

然而结果并不像我预期的那样。我会错过什么？谢谢

Answer 1

尝试这个。

CSS

table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
  background-color: #cfe2e8;  
}

让我知道这是否对您有帮助。

我刚刚添加>到目标直接子级

Answer 2

只需使用 CSS 特异性：

.cb_inline_block {
    display:inline-block;
}



.cb_table-hover tr:hover td,
.cb_table-hover tr:hover th{
      background-color: #cfe2e8;  
}


.cb_table-hover .sub_table-hover tr:hover td,
.cb_table-hover .sub_table-hover tr:hover th{
      background-color: #cfe2e8;  
}