如何强化伪css规则

Question

有什么方法可以强化伪css规则吗？即：

我有一个div(播放列表)的列表，我用以下规则着色：

#playlist .playlist_item { 
  background: #d6d6d6;
}

#playlist .playlist_item:nth-child(odd) {
  background: #b3b3b3;
}

现在，当播放一首歌曲时，我使用setInterval和JQuery的.animate函数来改变背景颜色。当歌曲结束时，我清除了间隔，但当然歌曲的背景仍然是间隔中设置的最后一个颜色。有没有办法根据CSS规则重新设置歌曲的颜色？否则，每当有人在播放列表中添加、删除或移动歌曲或歌曲结束时，我将不得不跟踪前一首歌曲(它可能改变了位置，从而改变了颜色)，或者设置不同的背景颜色类别，并重新设置播放列表中所有歌曲的类别。我更愿意使用只使用CSS的方法。

提前谢谢你，丹

Answer 1

您定义的默认背景颜色具有较低的特异性，而一半的情况具有较高的特异性。也就是说，这里有两个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中的第四个示例

Answer 2

将style属性设置为"“

例如：

node.style.backgroundColor=""

Answer 3

我不是100%确定，但是jQuery的animate直接在元素上改变了style属性，所以，在清除间隔之后，如果你这样做了：

$(this).attr("style","");

它应该清除style属性中的任何内容，并让CSS属性再次通过。