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;
}

デモ