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 is for。要为您点击的链接设置样式，请使用h1 a:active。

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

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

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

DEMO