CSS-:target ~

Question

那是我的 html 代码:

<a href="#anchor">test</a>
<ul id="anchor"></ul>

现在我想为我的目标设置样式，这不是问题。

#anchor:target 
{
}

但是我想选择目标(a)的兄弟。

#anchor:target ~ a{
    background: blue;
}

它不工作。如何选择目标的 sibling ？

Answer 1

目前，还没有办法用 CSS 给之前的 sibling 设置样式。为此，您必须使用 javascript。

您可以使用 + 获取下一个 sibling 或全部<a>在你的 <ul> 之后与 ~ :

#anchor:target + a {
    /*

    <ul></ul>
    <a>will get this one</a>
    <a>but not this one</a>

    */
}

#anchor:target ~ a {
    /*

    <ul></ul>
    <a>will get this one</a>
    <a>and this one too!</a>

    */
}