css - 覆盖背景颜色(css)

Question

我有一个输入有两个我需要覆盖的带有背景颜色的类。我正在尝试这样做:将该输入放入外部容器中，然后(使用 javascript)我将该容器的类更改为所需的类。

正如我所说，输入有两个类，这些类是我需要更改的类:irs-line 和 irs-bar。这两个类有自己的背景颜色。我需要红色和黄色的。我将通过一些单选按钮的值通过 javascript 触发类的更改。 (那是另外一个故事了)

我的问题是，在某个论坛上，有人给我这个提示:

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

但我不确定它是如何工作的或者我应该如何在输入中使用这些类。有什么帮助吗？ (我会问那个人他想做什么，但我不能)

更新:

这是我调用输入的代码:

<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;
}

我必须根据外部操作更改输入类(一些单选按钮会通过 javascript 更改条和线的颜色)

默认大小写:http://jsfiddle.net/h307fdau/红色案例:http://jsfiddle.net/mxt78oa5/

Answer 1

考虑到您最近的 HTML 和 CSS fiddle 编辑，我建议使用以下 jQuery:

1.保留这些 CSS 类以最好地隔离所需的 background-color 属性，就像您在评论中的共享 fiddle 中所做的那样:

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

2.此 jQuery 将根据单选 input 选择添加或删除颜色类，如果颜色与 slider 上的“实际”字符串值匹配，则删除任何颜色:

$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