【发布时间】：2014-12-10 15:30:50
【问题描述】：
我正在使用 Bootstrap 插件awesome-bootstrap-ckeckbox，我也在使用 ASP.NET MVC，然后我的所有复选框都呈现两个输入，一个作为复选框输入，另一个作为隐藏输入，因为我修改了 CSS 选择器，例如：
HTML 代码
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<input type="hidden" />
<label for="checkbox1">
Default
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked>
<input type="hidden" />
<label for="checkbox2">
Primary
</label>
</div>
CSS 代码
/* awesome-bootstrap-checkbox */
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
/* my own version */
.checkbox input[type="checkbox"]:checked + input + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + input + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox-primary input[type="checkbox"]:checked + input + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + input + label::after {
color: #fff;
}
这在除 Safari 7.1 之外的所有现代浏览器中都非常有效，令人难以置信的是原始作品，但我的修改不是，我认为问题出在同级选择器上。有什么想法？？？
Plunker 代码：Example
【问题讨论】：
-
@Clive 检查 Plunker 链接。
-
@Adrift 我改变了选择器，现在可以工作了，你能说出原因吗？？？
-
@Adriff 我明白了，谢谢你的帮助...
标签： css twitter-bootstrap safari css-selectors