Question

<span class='radio'>Place holder for Radio1</span>
<input checked type=radio name='radio' class='radio'>
<span class='radio'>Place holder for Radio2</span>
<input type=radio name='radio' class='radio'>

在此，我只希望与相应单选按钮关联的<span>可见但是......

* {
    visibility:hidden
}
.radio + .radio:checked {
    visibility:visible;
}

不起作用，而这样做：

* {
    visibility:hidden
}
.radio:checked + .radio {
    visibility:visible;
}

那么为什么我不能选择和操作与之前的相邻兄弟相关的css？

[jsfiddle]

Answer 1

因为+只能选择下一个兄弟，而不是之前的兄弟。

你还设置了一个非常有趣的例子，当你有两个完全不同的具有相同类名的元素并且你试图按类选择一个或另一个时，会出现什么问题。如果+选择器双向工作，则无论您如何编写选择器，前两个元素都会visibility: visible。

There is no previous sibling selector，所以你需要找到另一种解决方法。此外，“一般”兄弟选择器是~，而不是+，虽然没有人能够接触到以前的兄弟姐妹......

一般“前一个”相邻（+）兄弟不工作

1 个答案: