css - CSS链接相邻的兄弟姐妹：检查不起作用

Question

当我单击第二个单选按钮时，为什么这对我在 Chrome 中不起作用？第 2 段保持突出显示，第 4 段未突出显示。这是 Chrome 错误吗？
HTML：

<input type="radio" name="toggler" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
<input type="radio" name="toggler" />
<p>Paragraph three</p>
<p>Paragraph four</p>

CSS：

:checked + p + p {
  color: red;
}

Answer 1

我认为您遇到的问题与此处描述的相同：

带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

作为一种解决方法，只需添加:checked ~ p {}（故意为空）即可：

http://jsbin.com/abeniy/7/edit

Answer 2

那是奇怪的行为。我认为这与<p>输入元素的兄弟姐妹有关，而不是孩子。我发现了一些 hack 作为解决方法。您只需将每个包围input并p阻止在div. 然后使用~选择器...

的CSS：

input:checked ~ p + p {
        color: red;
      }

的HTML：

<div>
<input type="radio" name="accordion" checked />
<p>Paragraph one</p>
    <p>Paragraph two</p>
</div>
<div>
    <input type="radio" name="accordion" />
    <p>Paragraph three</p>
<p>Paragraph four</p>
</div>

演示：

http://codepen.io/lukeocom/pen/CABes

更新：

我刚刚注意到，如果您将此 css 添加到您的原始 html 中，那么它也可以工作。我不知道为什么虽然第二个选择器样式是空的......

input:checked + p + p {
        color: red;
      }

p:nth-child(2){}