如何加強僞css規則

是否有強化僞css規則？即：
我有我的規則如下顏色的div的列表（播放列表）：如何加強僞css規則

#playlist .playlist_item { 
    background: #d6d6d6; 
} 

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

現在，當播放歌曲時，我使用的setInterval和JQuery的.animate功能脈衝的背景色。當歌曲結束時，我清除間隔，但當然歌曲的背景仍然是間隔中設置的最後一個顏色。有沒有辦法根據CSS規則重新設置歌曲的顏色？否則，我將不得不跟蹤上一首歌曲（可能已經改變位置，從而改變顏色），或設置不同的背景顏色類別，並在某人添加，刪除或移動歌曲時重置播放列表中所有歌曲的類別播放列表或歌曲結束。我寧願使用僅限CSS的方法。

由於提前，丹

來源

2010-05-26 danwoods

設置樣式屬性爲「」

例如：

node.style.backgroundColor=""

來源

2010-05-26 20:48:53 Maz

與其他答案一樣，我是不是還要跟上前一首歌？ – danwoods 2010-05-26 21:01:45

我就這一個不是100％肯定，但jQuery的動畫是直接在元素上改變樣式屬性，所以在清除間隔後，如果你做了這樣的事情：

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

它應該清除style屬性中的任何內容，並讓CSS屬性再次出現。

來源

2010-05-26 20:49:45 RussellUresti

與此相關的問題是任何其他造型都會丟失。 – Maz 2010-05-26 20:51:04

難道我不得不跟蹤上一首歌嗎？ – danwoods 2010-05-26 20:57:29

不，你爲什麼要跟蹤上一首歌？從你的CSS看，你有一個基本的剝離繼續。通過將樣式設置爲空白，您只需刪除通過javascript添加的樣式，而不是CSS。而且，@Maz，我不認爲這是一個問題，因爲唯一會丟失的樣式是放置在style屬性上的樣式，而不是CSS中聲明的樣式。所以除非通過javascript添加了多種樣式，並且有些需要在歌曲完成後保留，這不是問題。 – RussellUresti 2010-05-26 21:36:44

這裏有一個例子：

$('.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 { 顯示：沒有; background：＃FF0000; } 並添加文件，所以你可以 $('#playlist .playlist_item_hightlight').css('backgroundColor');

來源

2010-05-26 21:04:31

你定義一個默認的背景色用的情況下，特異性較低，一半具有較高的特異性。這就是說，這裏有兩個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

來源

2010-05-26 21:16:52 FelipeAls

解決方案，我選擇了第四個例子：
我保持使用jQuery即先前播放的歌曲的曲目：

currently_playing = $('#' + currElmId);

這是發送歌曲閃光燈之後進行。

腳本早些時候（停止從閃爍上一首歌曲），我只是重置CSS的使用適當的元素：

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

希望這可以幫助別人。

來源

2010-05-26 22:29:03 danwoods

另一個我沒有看到上面提到的是爲你的脈衝使用CSS3動畫。讓JS應用「is-pulsing」類;脈動動畫無限循環直到課堂被刪除;那麼該元素的樣式會恢復爲常規的非脈衝背景。我做了一個CodePen來說明：http://codepen.io/MisterGrumpyPants/pen/enGcC

除了很簡單，這個解決方案也比JS動畫表現更好。值得一試。

來源

2013-08-19 05:03:24 davidtheclark

如何加強僞css規則

回答

相關問題