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的动画是直接在元素上更改样式属性，因此，在清除间隔后，如果你做了类似的事情：

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

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

Answer 4

这是一个例子：

$('.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
            });                 
       });

Running example

如果您想获得目标背景颜色，可以为其添加一个css类和项目：

.playlist_item_highlight { 显示：无; 背景：＃FF0000; } 并添加该文档，以便您可以 $('#playlist .playlist_item_hightlight').css('backgroundColor');

Answer 5

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

currently_playing = $('#' + currElmId);

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

脚本中的早期（为了阻止上一首歌曲闪烁）我只需使用以下命令重置相应元素的CSS：

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

希望这可以帮助别人。

Answer 6

我上面没有提到的另一种选择是使用CSS3动画进行脉冲处理。让JS应用“is-pulsing”类;脉冲动画无限循环，直到课程被删除;然后元素的风格恢复到其常规的非脉冲背景。我制作了一个CodePen来说明：http://codepen.io/MisterGrumpyPants/pen/enGcC

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

如何强化伪css规则

6 个答案: