找不到为什么复选框样式不适用

I am trying to apply this CSS我的复选框，但它似乎有其他的CSS正在停止它。找不到为什么复选框样式不适用

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

Here is a live demo of my CSS and HTML

我只把它应用到最后一组复选框，我可以看到check效果，但盒子本身并没有露面，甚至设置为非旧箱子仍然出现。

2013-07-25 Guapo

相关：http://stackoverflow.com/questions/3770615/how-to-use-firebug-to-easily-find-which-css-file-defines-a - 特别风格 – JJJ

它被覆盖，因为

#docContainer .fb-checkbox input

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

.regular-checkbox

改变你的风格声明

#docContainer .fb-checkbox input.regular-checkbox

，它将优先于以前的风格。

来源

2013-07-29 12:34:17 chadiusvt

例如，您可以使用萤火虫或镀铬开发人员工具轻松找出您的代码出了什么问题。你原来的复选框没有得到隐藏的原因是在#docContainer .fb-checkbox input CSS上线425

来源

2013-07-25 20:05:00

我看，你有没有其他有用的信息，为什么箱子的风格不显示？ – Guapo

尝试自己调试它，我已经提到了两种可能性。 –

它被覆盖，因为“#docContainer .fb-checkbox input”比你的“regular-checkbox”风格更具特色。您可以将“！重要”添加到“常规复选框”样式中以隐藏它。例如：。regular-checkbox {display：none！important; } 虽然“！重要”通常被认为是最后的手段，并且不推荐。但是你的CSS太庞大了，反正很难解析。这是我能想到的最快/最简单的修复。 – chadiusvt

你display: none的display: inline-block'设置被其他选择（见帕特里克的答案）覆盖。在Firebug中，它被划掉了，这意味着它没有被你的浏览器解释。

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

我建议你安装Firefox的Firebug或使用您的浏览器提供的开发工具。他们会告诉你哪些样式实际上是由浏览器呈现的。

来源

2013-07-25 20:12:41 Fabian

我看着你的样式表，看不到你已经设置了input复选框的样式。我跑它通过拨弄它工作正常

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

编辑

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

enter image description here

来源

2013-07-25 20:16:50 Vector

是的，它工作，如果你不使用其余的CSS和HTML，但没有其余的CSS和HTML没有多大意义;）。 – Guapo

删除任何引用复选框的其他样式。也删除任何通用输入样式。然后逐个添加这些位，直到它破坏:) – Vector

那么我想解决它，而不必使用'！important'，但谢谢。 – Guapo

试试这个代码

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

来源

2013-11-20 10:09:38

找不到为什么复选框样式不适用

回答

相关问题