css3 根据 url 锚点匹配元素

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>内容内容内容</p>
    <h3 id="title2">标题2</h3>
    <p>内容内容内容</p>
    <h3 id="title3">标题3</h3>
    <p>内容内容内容</p>
    <h3 id="title4">标题4</h3>
    <p>内容内容内容</p>
    <h3 id="title5">标题5</h3>
    <p>内容内容内容</p>
    <h3 id="title6">标题6</h3>
    <p>内容内容内容</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 样式。