ホームページ > 記事 > ウェブフロントエンド > ターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方
ターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方
- 云罗郡主転載
- 2018-11-19 10:48:474168ブラウズ
この記事では、ターゲット擬似クラス セレクターとは何なのかについて説明します。 css:target セレクターの使用方法には一定の参考値があります。必要な方は参考にしていただければ幸いです。
ターゲット セレクターの概要
: ターゲット セレクターは、ページ内のターゲット要素を選択するために使用されます。では、対象となる要素は何でしょうか？ターゲット要素とは、端的に言えば、要素の ID がページ上のハイパーリンクとして使用されることです。わかりにくいですか？まずはみんなに試してもらえる料理を出しましょう。
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 :target选择器</title>
<style type="text/css">
:target h3
{
color:red;
}
</style>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>効果は次のとおりです:
分析:
アンカーリンクがクリックされたとき、対応する対象要素の下の h3 タグのフォントの色が赤に変わります。
: ターゲット セレクターは通常、読者に優れたナビゲーション効果を提供するためにアンカー リンクと組み合わせて使用されます。これはユーザー エクスペリエンスにとって非常に優れたアプローチでもあります。
上記はターゲット疑似クラスセレクターとは何ですか? css:target セレクターの使用方法の完全な紹介。CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。
以上がターゲット擬似クラスセレクターとは何ですか? css:ターゲットセレクターの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はlvyestudy.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。