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

链A伪类

这表明此代码修复了该错误(注意nth-child(n)匹配任何元素,但将其添加到链中会导致它工作):

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

Answer 2

@ScottS提供了可靠的解决方案.另一个可能对我有用并且从外人那里更有意义的"为什么他们这样做了"的观点:

input:checked ~ section {
  display:block;
}

它选择后来的每个'部分'并且是'input:checked'的兄弟姐妹.

有两个条件我可以想到@ScottS的版本是优越的,因为'label'位置的元素也在我的解决方案中被选中:(1)'input的兄弟#1和#2是相同的元素(而不是'label'和'section')(2)你试图通过使用'*'选择器.