image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>
p {height: 60px;}
.links {border-top: 1px solid #aaa; background-color: #fff; position: fixed; bottom: 0; left: 0; right: 0; display: flex;}
.links>a {line-height: 40px; flex-grow: 1; text-decoration: none; text-align: center; }
:target {background-color: red}
</style>
</head>
<body>
<h3 id="title1">標題1</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<h3 id="title2">標題2</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<h3 id="title3">標題3</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<h3 id="title4">標題4</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<h3 id="title5">標題5</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<h3 id="title6">標題6</h3>
<p>內(nèi)容內(nèi)容內(nèi)容</p>
<div class="links">
<a href="#title1">標題1</a>
<a href="#title2">標題2</a>
<a href="#title3">標題3</a>
<a href="#title4">標題4</a>
<a href="#title5">標題5</a>
<a href="#title6">標題6</a>
</div>
</body>
</html>
點擊 a 標簽中的標題1，會跳到 id 為 title1 的標題位置逸寓，并通過偽選擇器 :target 匹配到標題1元素甘畅，并添加 background-color: red 樣式。
