Question

单击第二个单选按钮时，为什么this在我的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

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

Webkit bug with `:hover` and multiple adjacent-sibling selectors

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

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

Answer 2

这是一种奇怪的行为。我认为这与输入元素的兄弟姐妹<p>有关，而不是孩子。我找到了一些黑客作为一种解决方法。您只需围绕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){}

CSS链接相邻的兄弟：检查不工作

2 个答案: