Google chrome Chrome/webkit在输入时不呈现css显示更改：选中+；元素+；要素 脚本

我有一个CSS选择器，它应该在单击标签时显示子内容。选择器沿着

input:checked+element+element

的行，为最后一个元素显示一个block（默认为none）。问题是，除了webkit之外，它在所有主要浏览器中都能工作。Chrome、Safari和android手机浏览器（v2.2抱歉，我落后于时代）都无法显示该元素。当我检查Chrome中的元素时，它显示它应该是

display:block

，但它没有渲染它。我可以在开发人员工具中取消选中并检查属性，它会显示出来，但之前不能

我假设这是webkit中的一个bug

问题: 这是一个多部分问题：这是webkit中已知的bug吗？我的选择器有什么问题吗？我如何解决webkit浏览器的问题（有任何创造性的建议）

代码 HTML

演示 演示：
来源：

听起来与

如果您交换标记中的

和

结构（并相应地调整CSS），它将工作

（但是现在

+

-

不切换）

编辑：

---

将

和

放在div容器中工作：

正如

mdmullinax

所述，这是chrome中一个突出的错误

这个黑客在公认答案中的链接中对我起了作用：

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

链接一个伪类 此代码修复了错误（请注意，

nth child（n）

匹配任何元素，但将其添加到链中会使其工作）：

---

@ScottS提供固溶体。另一个可能对我有用并且从局外人的角度来说更有意义的观点是“他们为什么这么做？”

input:checked ~ section {
  display:block;
}

选择“输入：已选中”之后的每个“节”，并且是“输入：已选中”的同级

我可以想到两个条件@ScottS的版本更优越，因为在我的解决方案中，“label”位置的元素也被选中： （1） '输入的同级#1和#2是相同的元素（而不是'label'和'section'）

---

（2） 您试图通过使用“*”选择器来实现通用性。

看起来像是一个重新绘制的“bug”，兄弟姐妹不会在检查切换上重新绘制。如果在inspector中打开/关闭显示，则不会正确绘制。同样的结果在Safari（个人电脑）感谢您的回复，@mdmullinax。这是有道理的，但它确实将从

+

更改为

-

。我还尝试了一些其他属性来测试它。请参阅此演示：中的CSS解决方案可能更适合您的需要，因为它不需要任何额外的HTML标记，并且可以在最终发现错误时删除fixed@MyHeadHurts事实上，我发现并发布了一个比你链接到的bug更好的解决方案。@ ScottS，它绝对是我要做的一个更酷的黑客。添加我的收藏：）谢谢！很遗憾，Chrome在链式选择器上有这么多麻烦！你知道如何允许切换+/-吗？把

和

放在一个div容器中似乎是可行的，只是发布这个，这样我下次就能更容易地找到答案；）刚刚发布了我发现的更好的解决方案。太棒了！这完全纠正了这个问题！如果我可以问的话，你是如何找到这个解决方案的？在试验中的反复试验与同一问题有关。完美。与

webkit animate

相比，首选解决方案，因为这会导致android设备上的滚动延迟。这对我来说很有效，但因为它是输入：选中+输入[type=hidden]标签我需要将第n个子项（n）应用于标签，而不是隐藏字段。太棒了！这对我也有用。USB调试也帮了大忙。但一旦诊断出来，这条线索就更有意义了。谢谢。我不认为这是低劣的。事实上，这很直观。谢谢你发布这个答案。这是一本书。我必须更改的一件事是，将输入、标签和分区都放在同一个容器元素下，以防止以前的同级选择器显示不属于它的其他分区。我还做了单选按钮只是为了好玩。虽然接受的答案正确地修复了chrome bug问题，但这是一种可能的替代方法。你至少应该得到一笔赏金。修好的对我有用。“第n个孩子”没有。输入~标记输入是一个复选框。这救了我的命：D

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

input:checked + label:nth-child(n) + section {
  display:block;
}

input:checked ~ section {
  display:block;
}