在同一页面上使用两种不同的复选框

Question

我在globals.css上定义了我的"默认"复选框样式，我在每个页面上包含的文件

input[type=checkbox] {
    display:none;
}
input[type=checkbox]+label {
    width:auto;
    display:inline-block;  
    cursor:pointer;
    position:relative;
    line-height:20px;
    padding-left:22px;
}
input[type=checkbox]+label:before {
    content:"";  
    display:inline-block;  
    width:16px;  
    height:16px;  
    position:absolute;  
    left:0;  
    background-color:#F5F5F5;
    border-width:1px;
    border-style:solid;
    border-radius:3px;  
}
input[type=checkbox]:checked+label {
    outline:0;
}
input[type=checkbox]:checked+label:before {
    content:'2713';
    font-size:16px;
    line-height:16px;
    text-align:center;  
}

然后，在页面上，我需要此类复选框为"默认值"和另一个复选框（On-Off Switch）。问题在于，开关还采用了普通Globals.css的CSS样式。解决此问题的唯一方法是对每个问题都重要的？（或大多数）On-Off开关的线路？还是有一种方法可以将CSS重置为此容器和应用新样式的普通复选框？

on-Off CSS

.checkbox_onoff {
    float:left;
    width:60%;
    position: relative; width: 60px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.checkbox_onoff-checkbox {
    display: none;
}
.checkbox_onoff-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #666666; border-radius: 0px;
}
.checkbox_onoff-inner {
    width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.checkbox_onoff-inner:before, .checkbox_onoff-inner:after {
    float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.checkbox_onoff-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #6194FD; color: #FFFFFF;
}
.checkbox_onoff-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #F8F8F8; color: #666666;
    text-align: right;
}
.checkbox_onoff-switch {
    height:20px;
    width:20px; margin: 0px;
    background: #FFFFFF;
    border: 2px solid #666666; border-radius: 0px;
    position: absolute; top: 0; bottom: 0; right: 36px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
.checkbox_onoff-checkbox:checked + .checkbox_onoff-label .checkbox_onoff-inner {
    margin-left: 0;
}
.checkbox_onoff-checkbox:checked + .checkbox_onoff-label .checkbox_onoff-switch {
    right: 0px; 
}

Answer 1

您可以使用!important，也可以做这篇文章中的工作

使用"！在CSS？

中

我还发现其他帖子非常有帮助：http：//css-tricks.com/when-using-important-is-the-right-choice/

确保您的全局CSS声明在您的第二个CSS声明之前。

Answer 2

有几种方法可以实现所需的目标，！重要的是其中之一，您可以使用它，没问题。这不是最好的做法，但是由于您提到这将是有限的用途，因此在受控的环境中应该没有问题。

仍然，如果您可以进行一些更改，例如在该页面中要控制的元素上添加类，并使用该类修改元素。

或者您可以加载CSS，然后在文档头上添加样式部分以修改CSS文件的效果。

最后，您可以在标签本身上添加样式属性，尽管考虑到您的代码，但它看起来太多了，无法在标签中可读。