html - HTML でフォーカスされたアンカーに CSS スタイルを追加する方法

Question

1 ページ目には、2 ページ目の特定のポイントに移動するためのリンクがあります。

<a href="page2.html#position">MY TEXT HERE</a>

これにより、次のコードを使用して、2 ページ目のアンカー (位置) に直接移動できます。

<a name="position"> MORE TEXT HERE</a>

さて、私の質問は、#position が URL にある場合、テキストと背景の色を変更するにはどうすればよいですか?

例: www.domainname.com/page2.html#position

これは私が使用した CSS ですが、機能しません。

#position {
color:#ff0000;
background-color:#f5f36e;
}

前もって感謝します！

score 12 · Accepted Answer

:targetセレクターを使用します。

a:target, /* or simply */
:target {
    /* CSS to style the focused/target element */
}

id名前付きアンカーは完全に廃止されていない場合でも削除されたように見えるため、特定の要素のを使用してフォーカスを取得する方がよいでしょう。

参考文献:

score 3 · Accepted Answer

CSS3:target擬似セレクターを使用できます: http://blog.teamtreehouse.com/stay-on-target

また、古い神話を使用しないで<a name="destination">...</a>ください。必要なidのは、ジャンプしたいセクションだけです。<section id="destination">...</section>

score 1 · Accepted Answer

<a href="#position2" id="position">MY TEXT HERE</a>
...
<a name="position2" id="pos2"> MORE TEXT HERE</a>

...CSSで：

a[name=position2]:target{     
    background-color:green;
}

score 0 · Accepted Answer

使ってみてください

<a name="position" class="position"> MORE TEXT HERE</a>

そしてCSSでの使用

.position {
color:#ff0000;
background-color:#f5f36e;
}

score 0 · Accepted Answer

タグにIDを追加します。

あなたはここであなたの例を使ってどのように見ることができます

<a id="position" href="#position">MY TEXT HERE</a>

5 に答える 5