css - CSS3：目标问题

Question

我有 2 个“链接”，当我点击它们时必须获得颜色。但它们也需要在 h1 标签中。

像这样：

<div id="content" class="work">
    <h1 style="border-bottom:1px solid #CCC;"><a id="link-grafisk-design" href="#grafisk-design">Grafisk design</a></h1>
    <h1 style="border-bottom:1px solid #CCC;">&nbsp;/&nbsp;</h1>
    <h1 style="border-bottom:1px solid #CCC; width:276px"><a id="link-webbdesign" href="#webbdesign">Webbdesign</a></h1>
</div>

但是当我点击其中一个时它不会改变颜色。
这是CSS

#webbdesign:target ~ #link-webbdesign {
    color:#00A2FF;
}

Answer 1

那不是:target为了。对于您单击的链接的样式，您应该使用h1 a:active.

h1 a:active {
     color:#00A2FF;
}

如果您希望更改的颜色一直持续到用户单击其他内容，请使用：

h1 a:focus,
h1 a:active {
    color: #00A2FF;
}

演示