CSS nth-child(奇数): hover when hover:not used

Question

只是想知道如何让奇数行也不会悬停。我已经尝试了在 SO 上找到的所有结果，但没有任何效果。忽略盒子阴影。

#list tr:nth-child(odd) {
    background: #fff;
}
#list td:empty {
    background: hsla(50, 25%, 60%, 0.7);
}
#list tr:hover:not(#firstrow), tr:hover td:empty {
    background: #ff0;
    pointer-events: visible;
}
#list tr:hover:not(#firstrow) {
    transform: box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);
}

我知道我的 onclick 不会起作用，所以我留下了一个机会让您看到它的实际效果。 http://codepen.io/anon/pen/PwQpEN

Answer 1

为每个悬停规则添加一个额外的 :nth-child(even):

#list tr:hover:nth-child(even):not(#firstrow), tr:hover td:empty {
    background: #ff0;
    pointer-events: visible;
}
#list tr:hover:nth-child(even):not(#firstrow) {
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);
}

如果 #firstrow 总是引用 tr:first-child，那么您也可以删除 :not(#firstrow)，除非你需要它的特异性。