覆蓋backgroud-color（css）

Question

我有一個輸入，它有兩個需要覆蓋的backgroud-color類。我試圖做到這一點：把這個輸入放在一個外部容器中，並且（用javacript）我將把那個容器的類改爲所需的類。

正如我所說，輸入有兩個類，那些類是我需要更改的類：irs-line和irs-bar。這兩個clases有自己的背景顏色。我需要他們紅色和黃色。我將通過一些單選按鈕的值通過javascript觸發類的更改。 （這是另一個故事）

我的問題是，在一些論壇上，一個人給我這樣的提示：

.container.color-yellow .irs-line { 
    background-color: yellow; 
} 
.container.color-red .irs-line { 
    background-color: red; 
} 

但我不知道它是如何工作或我應該如何輸入使用這些類。任何幫助？ （我會問那傢伙什麼都想要他做的，但我不能）

UPDATE：

這是我的代碼，我調用輸入：

<div className="uk-width-1-4"> 
    <input type="text" name="timewmsslider" ref="timewmsslider" /> 
</div> 

這Reacjs，所以與ref =「timewmsslider」是如何用默認的irs-bar和irs-line類定義輸入。

該輸入是使用默認的irc-line和irc-bar css類生成的。所以，如果我在css中有這個類（對於紅色和黃色都是這樣），應該怎麼調用？

.irs-line-yellow { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9e459 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

.irs-bar-yellow { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e9d759; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e9d759 0%, #e9d759 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e9d759 0%,#e9d759 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e9d759 0%,#e9d759 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9d759', endColorstr='#e9d759',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 

.irs-bar-red { 
    height: 16px; 
    top: 24px; 
    margin-left: -7px; 
    padding-right: 5px; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 0; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
} 
.irs-line-red { 
    height: 16px; 
    top: 24px; 
    border-radius:8px; 
    border: #EEEEEE 1px solid; 
    background: #e95959; /* Old browsers */ 
    background: -moz-linear-gradient(top, #e95959 0%, #e95959 70%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #e95959 0%,#e95959 70%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #e95959 0%,#e95959 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e95959', endColorstr='#e95959',GradientType=0); /* IE6-9 */ 
    position: relative; 
    display: block; 
    overflow: hidden; 
    outline: 0!important; 
} 

我必須改變與依賴於externala動作那些者輸入的類（某些單選按鈕將改變通過javascript杆和線的顏色）

默認情況下：http://jsfiddle.net/h307fdau/ 紅色情況下：http://jsfiddle.net/mxt78oa5/

Answer 1

考慮到你的最新的HTML CSS &小提琴的編輯，我建議以下的jQuery：

1.Keep這些CSS類最佳隔離NE EDED background-color財產您在評論共享小提琴那樣：

.red {background-color: red;} 
.yellow {background-color: yellow;} 

2，本jQuery將根據無線電input選擇&去除任何顏色，如果他們匹配滑蓋「實際」的字符串值添加或刪除顏色類：

$range.on("change", function() { 
    //store slider & radio inputs values 
    var value = $(".js-range-slider").prop("value"); 
    var radioColor = $(".extra-controls input[type=radio]:checked").val(); 
    //if value matches actual remove colors 
    if (value == 'actual') { 
     $(".irs-line").removeClass(radioColor); 
     $(".irs-bar").removeClass(radioColor); 
     //prevent bottom line from coloring on slider actual date 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-line").removeClass("yellow"); 
      $(".irs-bar").removeClass("yellow"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
    } 
    //else add the default radio input selected color 
    else { 
     $(".irs-line").addClass(radioColor); 
     $(".irs-bar").addClass(radioColor); 
     //add manually selected radio color 
     $("#escenario-moderado").on("change", function() { 
      $(".irs-bar").addClass("yellow"); 
      $(".irs-line").addClass("yellow"); 
      $(".irs-line").removeClass("red"); 
      $(".irs-bar").removeClass("red"); 
     }); 
     $("#escenario-severo").on("change", function() { 
      $(".irs-line").addClass("red"); 
      $(".irs-bar").addClass("red"); 
      $(".irs-bar").removeClass("yellow"); 
      $(".irs-line").removeClass("yellow"); 
     }); 
    } 
}); 

Working JSFiddle