css - 如何在通过 ajax 加载时覆盖 的 CSS？

Question

我这里有一个例子，你可以点击一行，它会在下面插入一个新行。新行包含一个新表。

See fiddle

正如您从上面的 fiddle 中看到的那样，每个表格的 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;  
}

正如您在此 new fiddle 中看到的那样:

然而结果并不如我所料。我可能会错过什么？谢谢

Answer 1

Try this.

CSS

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

如果这对你有帮助，请告诉我。

我刚刚添加了 > 来定位直接 child