css - 一般 "previous"相邻 (+) 兄弟不工作

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 ，所以你需要找到另一种方法来解决这个问题。此外，“通用”兄弟选择器是 ~，而不是 +，尽管两者都无法到达之前的兄弟...