如何加强伪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选择器中的第四个示例-结构化伪类

Answer 2

我上面没有提到的另一种方法是使用CSS3动画进行脉动。 使JS应用“ is-pulsing”类； 脉冲动画无限循环，直到删除该类为止； 然后元素的样式恢复为其常规的无脉动背景。 我做了一个CodePen来说明： http ://codepen.io/MisterGrumpyPants/pen/enGcC

除了简单之外，此解决方案还将比JS动画表现更好。 值得一试。

Answer 3

将样式属性设置为“”

例如：

node.style.backgroundColor=""

Answer 4

我不确定是否对此有100％的把握，但是jQuery的动画是直接在元素上更改style属性，因此，在清除间隔后，是否进行了以下操作：

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

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

Answer 5

这是一个例子：

$('.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 {display：none; 背景：＃FF0000; }并添加该文档，以便您可以$('#playlist .playlist_item_hightlight').css('backgroundColor');

Answer 6

我选择的解决方案：
我使用jQuery跟踪以前播放的歌曲，即：

currently_playing = $('#' + currElmId);

将歌曲发送到闪存后即可完成。

在脚本的前面（以防止上一首歌曲闪烁），我只需使用以下命令为相应的元素重置css：

currently_playing.stop(true, false);
clearInterval(highlight);

希望这可以帮助其他人。