CSS - :target~

Question

这是我的HTML代码:

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

现在我想要设定我的目标,这不是问题.

#anchor:target 
{
}

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

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

它不起作用.如何选择目标的兄弟？

Answer 1

目前，还没有办法使用 CSS 来设置以前的兄弟姐妹的样式。要实现这一点，您必须使用 JavaScript。

您可以通过以下方式获得下一个同级或在您之后的+所有<a>s ：<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>

    */
}