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

然后在页面上，我需要这种类型的复选框为“默认”，另一个复选框（开关开关）只在一个地方。问题是交换机还采用了globals.css的普通复选框的CSS样式。是解决这个问题的唯一方法适用！每个都很重要？（或大部分）通断开关的线路？或者有没有办法将CSS重置为此容器的正常复选框并应用新样式？

开关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或者您可以执行此帖中的操作

What are the implications of using "!important" in CSS?

我还发现这篇文章非常有帮助：http://css-tricks.com/when-using-important-is-the-right-choice/

确保您的全局css声明在第二次css声明之前。

Answer 2

有几种方法可以达到你想要的效果，重要的是其中之一，你可以使用它，没问题。这不是最好的做法，但是既然你提到它将是一个有限的用途，在受控环境中，应该没有问题。

但是，如果您可以进行一些更改，例如在您要在该页面中控制的元素中添加一个类并使用该类修改元素，那会更好。

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

最后，你可以在标签本身上添加一个样式属性，虽然考虑到你的代码，但它对于标签的可读性来说似乎太多了。

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

2 个答案: