css - ajaxによってロードされたときにのCSSをオーバーライドするにはどうすればよいですか？

Question

ここに、行をクリックして、その真下に新しい行を挿入する例があります。新しい行は新しいテーブルで構成されます。

フィドルを見る

上記のフィドルからわかるように、CSSにカーソルを合わせると、テーブルごとに個別に配置されます。問題は、親テーブルからのホバーが2番目のテーブルをカバーすることです。

むしろ、新しい行にカーソルを合わせるときに親テーブルからのホバーオーバー効果をオーバーライドして、代わりにサブテーブルのホバー効果を確認できるようにします。

親のテーブル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;  
}