Question

方案

我有一个CSS选择器，可以在单击标签时显示子内容。选择器沿着input:checked + element + element的行，给最后一个元素一个块的显示（默认为none）。问题是它适用于所有主流浏览器，但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伪类

This demonstrates此代码修复了该错误（请注意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）'输入的兄弟＃1＆amp; ＃2是相同的元素（而不是'label'和'section'）（2）你试图通过使用'*'选择器。

Answer 3

听起来像是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 4

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

这个黑客通过接受的答案中的链接为我工作：

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

Chrome / webkit无法渲染css显示输入更改：已选中+元素+元素

方案

问题

代码

演示

4 个答案:

链A伪类