在悬停后锚定所有兄弟姐妹的风格

Question

我试图在<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;
}

这是Fiddle。问题是，只有第一个兄弟是风格。我想念一下吗？

Answer 1

尝试~ (General sibling combinator)

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

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

Answer 2

+仅选择相邻的兄弟姐妹。您想使用~

请参阅Adjacent sibling selectors vs General sibling selectors

Answer 3

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

试试这个：

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

Answer 4

您使用的是错误的选择器。 +选择adjacent siblings。您需要使用general sibling selector ~：

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

See this demo.

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

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

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

See this demo.