css - 高级 :hover deeper nested

Question

我不知道该如何描述？我认为如果你看看我制作的 jsfiddle 会更好..

如您所见，某些 TR 元素上有悬停，如果 TD 已经有另一个 bgcoler，它必须更改为替代 bgcolor..

它在前 3 行中工作正常，但如果在 DOM 中嵌套了一个新表，则新表中的绿色 TD 始终具有 :hover 类

jsfiddle

http://jsfiddle.net/VvZuV/1/

Answer 1

改变这个:

tr:hover td.green, tr.deep:hover td.green {
    background:#7bcf81;
}

对此:

tr:hover > td.green, tr.deep:hover > td.green {
    background:#7bcf81;
}

不需要新类(class)。

http://jsfiddle.net/rCztp/

---

解释

当您将鼠标悬停在 <tr> 上时包含 <table> ，所有的 child ，孙子，等等，都受到你的 CSS 规则的影响。使用 >意味着只有 child 会受到影响。