CSS在Chrome上不起作用[关闭]答案

【问题标题】：CSS Not working On Chrome [closed]CSS在Chrome上不起作用[关闭]
【发布时间】：2014-10-17 19:18:16
【问题描述】：

我正在尝试制作一个看起来很酷的复选框。我有一个复选框，然后是一个隐藏的输入，然后是一个标签。我正在尝试在选中复选框时更改标签的字体粗细。

    <html>
    <head>
	<style type="text/css">
			input[type="checkbox"]:checked + input[type="hidden"] + label{
				font-weight:bold;
			}
	</style>
    </head>

    <body>
	<div>
		<input type="checkbox" id="1"/>
		<input type="hidden"/>
		<label for="1">My Label</label>
	<div>
    </body>

    </html>

但是我不能让它在 Chrome 上工作。但是如果我在 jsfiddle 上用 chrome 试试这个，它就可以工作！！！！！

Here is the Fiddle

有什么想法吗？

【问题讨论】：

可能覆盖规则？
您的问题似乎无法重现。您页面上的其他内容对此 <label> 有影响
你为什么不能这样尝试？ input[type="checkbox"]:checked ~ label{font-weight:bold;}
对我来说，它可以在 Chrome 上重现。也许它是特定版本的问题。我会调查的。
Chrome/webkit not rendering css display change on input:checked + element + element的可能重复

标签： css html google-chrome

【解决方案1】：

将你的 css 更改为下面的，它工作正常

input[type="checkbox"]:checked + input + label{
                font-weight:bold;
}

【讨论】：

@Emre 没有问题！但我不明白为什么在应用隐藏属性时它不起作用。
其实css没有错，部分Chrome版本存在多个相邻兄弟选择器的bug。
@CemOzer 我也是这么想的，但不明白它是如何在 jsfiddle 上工作的。很可能它应用了一些使其工作的规则。
我在 jsfiddle 也有这个问题，在 Ubuntu 12.04 上使用 Chromium 36.0。在FF中完全没问题。

【解决方案2】：

您设置的更改比它的工作小。

<style type="text/css">
        input[type="checkbox"]:checked + input[type="hidden"] ~ label{
            font-weight:bold;
        }
</style>

【讨论】：