:target

:target CSS伪类代表一个唯一的页面元素，其id与当前Url片段相匹配
图片-1656388288962
例如，以下 URL 拥有一个片段 (以#标识的) ，该片段指向一个 ID 为 section2 的页面元素：

http://www.example.com/index.html#section2
若当前 URL 等于上面的 URL，下面的元素可以通过 :target 选择器被选中：
<section id="section2">Example</section>

实例讲解

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:target {
            background-color: crimson;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<a href="#nice">点我方块1变红</a>
<a href="#nice2">点我方块2变红</a>
<div id="nice">
dsfads
</div>
<div id="nice2">
    dsfsf
</div>
</body>
</html>

图片-1656468835376

效果大概是这样的
图片-1656468882499
图片-1656469329227
图片-1656469395745