用链接定位两个Div

Question

我想使用纯css更改两个DIV的color。无论如何，我只能使用 single href attribute 是否可以使用纯CSS 。

#link1:target{color:red;}
#link2:target{color:green;}
margin-top:20px;

<a href="#link1 ">Make links change color</a>
<!-- <a href="#link1 #link2">Make links change color</a> //this not working-->
<div id="link1">
link1
</div>
<div id="link1">
link2
</div>

Answer 1

您可以用目标ID将其包装在div中。

这样：

#link1:target {
  color: red;
}

<a href="#link1 ">Make links change color</a>
<div id="link1">
  <div class="link2">
    link1
  </div>
  <div class="link2">
    link2
  </div>
</div>

Answer 2

在不修改标记的情况下，这是您将使用的CSS，使用相邻的兄弟姐妹选择器，并假设那是您想要的边距的地方。但是您只能在一个页面上使用ID，因此您应该将第二个id="link2"进行。

#link1:target {
  color: red;
}
#link1:target + #link1 {
  color: green;
  margin-top:20px;
}

<a href="#link1 ">Make links change color</a>
<div id="link1">
  link1
</div>
<div id="link1"> <!-- make this one id="link2" -->
  link2
</div>