有没有加强伪 CSS 规则？即：
我有一个按以下规则着色的 div（播放列表）列表：
#playlist .playlist_item {
background: #d6d6d6;
}
#playlist .playlist_item:nth-child(odd) {
background: #b3b3b3;
}
现在，当播放歌曲时，我使用 setInterval 和 JQuery 的 .animate 函数来脉冲背景颜色。歌曲完成后，我清除间隔，但歌曲的背景当然仍然是间隔中设置的最后一个颜色。有没有办法根据 CSS 规则重新设置歌曲的颜色？否则，我将不得不跟踪上一首歌曲（可能已经改变了位置，从而改变了颜色）或设置不同的背景颜色类，并在有人添加、删除或移动歌曲时重置播放列表中所有歌曲的类在播放列表或歌曲结束。我宁愿使用仅 CSS 的方法。
提前致谢， 丹
【问题讨论】：
标签： javascript css css-selectors
您正在定义具有较低特异性的默认背景颜色和具有较高特异性的一半案例。也就是说，这里有两个 CSS 解决方案：
第一：
#playlist .playlist_item { /* only here for compatibility with browsers that don't understand CSS3 selectors */
background: #d6d6d6;
}
#playlist .playlist_item:nth-child(even) {
background: #d6d6d6;
}
#playlist .playlist_item:nth-child(odd) {
background: #b3b3b3;
}
如果必须支持旧浏览器，第一条和第二条规则不能合并使用，否则可以删除第一条规则。偶数和奇数覆盖所有情况，因此这样做很安全。
第二：
#playlist .playlist_item { /* compatibility reasons again */
background: #d6d6d6;
}
#playlist .playlist_item:nth-child(n) {
background: #d6d6d6;
}
#playlist .playlist_item:nth-child(odd) {
background: #b3b3b3;
}
第二个规则与第一个规则具有相同的效果，但优先级更高。这是CSS3 selectors - Structural pseudo-classes中的第四个例子
【讨论】：
将样式属性设置为“”
例如：
node.style.backgroundColor=""
【讨论】：
我不是 100% 确定这个，但是 jQuery 的动画是直接在元素上改变样式属性，所以，在清除间隔之后，如果你做了这样的事情：
$(this).attr("style","");
它应该清除样式属性中的任何内容，并让CSS属性再次通过。
【讨论】：
这是一个例子：
$('.playlist_item').click(
function() {
var $dv = $(this);
$dv.data('oldBG', $dv.css('backgroundColor')); // save the original background color
$dv.animate({backgroundColor: '#ff0000'}, 2000, function() {
$(this).css('backgroundColor', $(this).data('oldBG')); // once done, apply old background color
});
});
如果你想获得目标背景颜色，你可以为此添加一个 css 类和项目：
.playlist_item_highlight {
显示：无；
背景：#FF0000;
}
并添加该文档，以便您可以
$('#playlist .playlist_item_hightlight').css('backgroundColor');
【讨论】：
我选择的解决方案：
我正在使用 jQuery 跟踪以前播放的歌曲，即：
currently_playing = $('#' + currElmId);
这是在将歌曲发送到闪存后完成的。
在脚本的前面（为了阻止上一首歌曲闪烁）我只是使用以下方法重置了适当元素的 css：
currently_playing.stop(true, false);
clearInterval(highlight);
希望这可以帮助其他人。
【讨论】：
我没有看到上面提到的另一种方法是使用 CSS3 动画进行脉冲。让 JS 应用一个“is-pulsing”类；脉冲动画无限循环，直到类被删除；然后元素的样式恢复到其常规的非脉冲背景。我做了一个CodePen来说明：http://codepen.io/MisterGrumpyPants/pen/enGcC
这个方案除了简单之外，也比 JS 动画表现得更好。值得一试。
【讨论】：