Chrome / webkit没有渲染css显示更改输入：checked + element +元素 [英] Chrome/webkit not rendering css display change on input:checked + element + element

问题描述

我有一个CSS选择器，应该在单击标签时显示子内容。选择器沿着 input：checked + element + element 的行，给予最后一个元素块的显示（默认为none）。问题是它适用于所有主要的浏览器，除了webkit。 Chrome，Safari和Android的移动浏览器（v2.2对不起，我在时间之后）都无法显示元素。当我检查Chrome中的元素，它显示它应该是 display：block ，但它不呈现它。我可以unchec并检查属性在开发者工具，它显示，但显示，但不是之前。

I have a CSS selector that is supposed to display sub-content when a label is clicked. The selector is along the lines of input:checked + element + element giving that final element a display of block (default is none). The problem is that it works in all the major browsers with the exception of webkit. Chrome, Safari, and a mobile browser for android (v2.2 sorry, I'm behind the times) all fail to display the element. When I inspect the element in Chrome, it shows that it is supposed to be display: block but it doesn't render it. I can unchec and check the property in developer tools and it displays, but not before.

我假设这是一个在webkit的错误。

I assume that this is a bug in webkit.

这里是multipart问题：这是webkit中的已知错误吗？我的选择器有什么问题吗？

Here is the multipart question: Is this a known bug in webkit? Am I doing anything wrong with my selectors? And how can I work around the issue for webkit browsers (any creative suggestions)?

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

推荐答案

链A伪类

此演示这个代码修复了错误（注意 nth-child（n）匹配任何元素，但将它添加到链中会导致它工作）：

Chain A Pseudo-Class

This demonstrates that this code fixes the bug (note that nth-child(n) matches any element, but the adding of it into the chain causes it to work):

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

这篇关于Chrome / webkit没有渲染css显示更改输入：checked + element +元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！