html - 在悬停时锚定所有兄弟姐妹

Question

我正在尝试在 a<a>悬停之后设置所有节点的样式。

HTML代码是

<a href="#">test</a>
<p>Is styles</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>

CSS代码是

a:hover + p {
    background: #ffbbff;
}

这是一个小提琴。问题是，只有第一个兄弟是样式化的。我错过了什么吗？

Answer 1

试试~（通用兄弟组合器）

a:hover ~ p {
    background: #ffbbff;
}

http://jsfiddle.net/bKvMw/1/

Answer 2

+只选择相邻的兄弟姐妹。你想用~

请参阅相邻兄弟选择器与通用兄弟选择器

Answer 3

你需要一个通用的兄弟选择器，+是一个相邻的兄弟选择器

试试这个：

a:hover ~ p {
    background: #ffbbff;
}

Answer 4

您使用了错误的选择器。+选择相邻的兄弟姐妹。您需要使用通用的兄弟选择器 ~：

a:hover ~ p {
    background: #ffbbff;
}

看这个演示。

如果您愿意，您甚至可以组合这些选择器：

a:hover ~ p {
    background: #ffbbff;
}

a:hover + p {
    background: #ffffbb;
}

看这个演示。