首先得知道一个知识点，就是锚点。锚点就是a标签中的href属性指向某个元素的id，点击后浏览器会滚动到该元素的位置
:target伪类就是根据a标签上href的属性锚点，为对应的元素添加样式

下面看一个案例，点击test2标签，看有什么变化

<div>
  <a href="#test1">test1</a>
  <a href="#test2">test2</a>
  <a href="#test3">test3</a>
</div>
<div class="test">
  <div id="test1"></div>
  <div id="test2"></div>  
  <div id="test3"></div>  
</div>

css样式

.test div{
  width: 100px;
  height: 200px;
  border: 1px solid palegreen;
}
.test div:target{
  background:red;
}

点击前每个div是没有背景色的

点击前.png

点击test2后,test2背景色变成红色，并且根据锚点滚动到test2

点击test2后.png

锚点会在url加上hash，所以单页面应用hash模式下应该注意这个问题

锚点会加上hash.png