无法找出未应用复选框样式的原因

Question

I am trying to apply this CSS到我的复选框，但似乎其他一些CSS正在阻止它。

如何确定其他CSS可能会干扰它或者为什么不将该样式应用于我的复选框？

Here is a live demo of my CSS and HTML

我只将它应用到最后一组复选框，我可以看到check效果但是框本身没有显示，旧框甚至设置为非仍然出现。

Answer 1

您可以使用firebug或Chrome开发人员工具轻松找出代码有什么问题。原始复选框未隐藏的原因是第425行display: inline-block' css中的#docContainer .fb-checkbox input设置。

Answer 2

我查看了您的样式表，但看不到您为input复选框设置了样式。我通过一个小提琴运行它，它工作正常

DEMO http://jsfiddle.net/kevinPHPkevin/eB4zz/

<强>被修改

你的风格被覆盖了。为了测试目的，我在每个值旁边设置!important，然后它可以正常工作。

Answer 3

因为

而被覆盖

#docContainer .fb-checkbox input

比你的风格声明更具特异性：

.regular-checkbox

将您的样式声明更改为

#docContainer .fb-checkbox input.regular-checkbox

它将优先于之前的风格。

Answer 4

您的display: none会被其他选择者覆盖（请参阅Patrick的回答）。在Firebug中，它被划掉了，这意味着它没有被您的浏览器解释过。

Firebug http://imageshack.us/scaled/landing/856/ldk8.png

我建议您安装Firebug for Firefox或使用浏览器提供的开发人员工具。它们将向您显示浏览器实际呈现的样式。

Answer 5

试试这段代码

input[type="checkbox"] { 
    -moz-appearance: checkbox; -webkit-appearance: checkbox;
    margin-left:3px; border:0; 
    vertical-align: middle;    
    top: -1px;bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */  
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    backgorund: #ffffff; }