CSS nth-child(odd): 使用 hover:not 时悬停

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)，除非您需要它来表示特殊性。

CSS nth-child(odd): 使用 hover:not 时悬停

CSS nth-child(odd): hover when hover:not used

css

css-selectors