CSSターゲットの使い方

css ターゲットは、現在アクティブなターゲット要素を選択するために使用できる「:target」セレクターを指します。その使用構文は、「#tab:target {color:blue}」などです。このステートメントは意味します。 「#tab」要素を指すようにアンカー リンクを変更します。フォントの色は青です。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、thinkpad t480 コンピューター。

推奨事項: "css ビデオ チュートリアル "

css :target selector

URL の後にアンカー名 # を指定します。ドキュメント内の特定の要素に。リンクされた要素がターゲット要素です。

: ターゲット セレクターを使用して、現在アクティブなターゲット要素を選択できます。

CSS3: ターゲット疑似クラスは、ページ内のアンカー リンク URL が指す ID 要素のスタイルを変更するために使用されます。 [関連推奨: CSS オンラインマニュアル]

たとえば、#tab を指すリンクをたどる要素のフォントの色を青に変更したい場合は、次のように記述できます:

#tab:target {color:blue}

ブラウザのサポート:

IE8 以下の IE バージョンはサポートされません。IE9 はこの属性をサポートします。Firefox、Chrome などの他の非 IE コア ブラウザはすべて、この属性をサポートします。

使用法:

:ターゲット疑似クラスは、:hover、:link、:visited、:focus および他の疑似クラスと同じ使用法を持ちます。

:target {color:blue}

例: CSS3 :target pseudo-class タブ切り替え効果の実装

次は、csse :target を使用して JavaScript を使用せずにタブ切り替え効果を作成する方法の簡単な紹介です

HTML コード:

<div class="tablist">
<ul class="tabmenu">
<li>
<a href="#tab1">标签一</a>
</li>
<li>
<a href="#tab2">标签二</a>
</li>
<li>
<a href="#tab3">标签三</a>
</li>
</ul>
<div id="tab1" class="tab_content">tab1 content</div>
<div id="tab2" class="tab_content">tab2 content</div>
<div id="tab3" class="tab_content">tab3 content</div>
</div>

CSS コード:

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

原理は実際には非常に単純です。つまり、タブ要素を絶対位置に設定し、:target 疑似クラスを通じてそのレベル (z-index) を変更します。

以上がCSSターゲットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。