Chrome/webkit 未在输入时呈现 css 显示更改：已检查 + 元素 + 元素

Question

场景

我有一个 CSS 选择器，它应该在单击标签时显示子内容。选择器沿着input:checked + element + element 的行，为最终元素提供块显示（默认为无）。问题是它适用于除 webkit 之外的所有主要浏览器。 Chrome、Safari 和 android 的移动浏览器（v2.2 抱歉，我落后于时代）都无法显示该元素。当我在 Chrome 中检查元素时，它显示它应该是 display: block 但它没有呈现它。我可以在开发人员工具中取消选中并检查该属性，它会显示，但不是之前。

我认为这是 webkit 中的一个错误。

问题

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

代码

HTML

  <input id="c1" type="checkbox">
  <label for="c1">Ein</label>
  <section>Content</section>

  <input id="c2" type="checkbox">
  <label for="c2">Zwei</label>
  <section>Content</section>

  <input id="c3" type="checkbox">
  <label for="c3">Drei</label>
  <section>Content</section>

CSS

input {
  float:left;
  clear:left;
  visibility: hidden;
  position:absolute;
}

label {
  color:green;
  display:block;
  cursor:pointer;
}

section {
  display:none;
}

label:after {
  content:" +";
}

input:checked + label:after {
  content:" -";
}

input:checked + label + section {
  display:block;
}

演示

演示：http://jsbin.com/epibin/2
来源：http://jsbin.com/epibin/2/edit

Answer 1

听起来很像Bug 45168 – CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector

如果您在标记中交换 <label> 和 <input> 结构（并相应地调整 CSS），它就可以工作。

http://jsbin.com/epibin/10/edit

（但现在+ - 不切换）

编辑：

将 <label> 和 <section> 放入 div 容器中有效：http://jsbin.com/epibin/12/edit

Answer 2

正如mdmullinax 所说，这是 chrome 中的一个突出错误。

这个 hack 从接受的答案中的链接对我有用：

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

Answer 3

链一个伪类

This demonstrates 表示此代码修复了错误（请注意，nth-child(n) 匹配任何元素，但将其添加到链中会使其正常工作）：

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

Answer 4

@ScottS 提供了一个可靠的解决方案。另一种可能的方法对我有用，并且从局外人“他们为什么这样做”的角度来看更有意义：

input:checked ~ section {
  display:block;
}

它选择后面的每个“节”，并且是“输入：已检查”的兄弟。

有两种情况我可以想到@ScottS 的版本更优越，因为在我的解决方案中也选择了“标签”位置的元素： (1) 'input's 兄弟#1 & #2 是相同的元素（而不是'label' & 'section'） (2) 您试图通过使用“*”选择器来概括。