13

设想

我有一个 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

4

4 回答 4

18

链A伪类

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

input:checked + label:nth-child(n) + section {
  display:block;
}
于 2013-06-20T17:55:10.247 回答
5

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

input:checked ~ section {
  display:block;
}

它选择之后的每个“部分”，并且是“输入：检查”的兄弟姐妹。

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

于 2013-08-28T22:49:47.303 回答
3

听起来与错误 45168 相匹配 - 如果前缀为伪类选择器，则忽略 CSS 多个相邻兄弟选择器序列

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

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

（但现在+ -不要切换）

编辑：

将<label>and<section>放入 div 容器中可以工作：http: //jsbin.com/epibin/12/edit

于 2013-01-07T18:27:18.810 回答
1

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

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

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
于 2013-05-01T16:21:22.420 回答