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>之后使用<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>

    */
}

Answer 2

在CSS中没有“上一个”兄弟选择器（在CSS2或CSS3中）。

“选择器等级4”草稿介绍！选择器，如果我理解正确，则允许选择之前的兄弟选择。
https://drafts.csswg.org/selectors-4/#subject

但是，这仍处于草稿形式，并且远未得到所有主流浏览器的支持。

很抱歉，但目前的CSS规范无法实现。
真正实现这一目标的唯一方法是使用JavaScript，或更改标记的顺序。

Answer 3

目前，您无法获得以前的兄弟姐妹。但您可以选择具有特定属性的元素，如下所示：

a[href="#anchor"] {
	color: #f00;
}

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

Answer 4

根据我之前的回答，由于CSS的限制，这是不可能的。

但是，你总能匹配自己吗？

a[target|="#"] {
}

这将选择文档中指向本地锚点的所有<a>标记。