ここは#sample1です。
ターゲットにされると背景色がピンクに変わります。
ここは#sample2です。
ターゲットにされると背景色がうすい緑に変わります。
ここは#sample3です。
ターゲットにされると背景色がオレンジに変わります。
#sample1:target{
background:#fcc; /* 背景色・ピンク */
}
#sample2:target{
background:#cfc; /* 背景色・うすい緑 */
}
#sample3:target{
background:#fc6; /* 背景色・オレンジ */
}
<ul>
<li><a href="#sample1">ここのhref属性の値は「#sample1」です。</a></li>
<li><a href="#sample2">ここのhref属性の値は「#sample2」です。</a></li>
<li><a href="#sample3">ここのhref属性の値は「#sample3」です。</a></li>
</ul>
<div id="sample1">
<p>ここは#sample1です。<br />
ターゲットにされると背景色がピンクに変わります。</p>
</div>
<div id="sample2">
<p>ここは#sample2です。<br />
ターゲットにされると背景色がうすい緑に変わります。</p>
</div>
<div id="sample3">
<p>ここは#sample3です。<br />
ターゲットにされると背景色がオレンジに変わります。</p>
</div>