在实现的过程中遇到了一些问题
总结：
1、：target的语法及使用
2、设置ul的width时，对于BFC，标准流，margin的层叠问题产生疑问
什么情况下生成BFC
1、浮动
2、相对定位
3、设置display:inline-block/table-cell/flex/table-capiton/inline-flex
4、overflow的值不是visible
什么情况下margin不会发生层叠（非学术语言，只是自己的解释）
1、一个标准流元素相邻一个BFC不会发生层叠
2、BFC与BFC之间不会发生层叠
实现思路：
1、结构
2、样式
3、将.bg进行绝对定位，然后通过.bg:not(:target) 来设置z-index，
4、对第三步可以换一种方式,可以设置display：none 来实现，但是display会引起回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）
扩展：
display：是不会占用空间，显示隐藏都会引起回流
visibility：会占用空间，不会引起回流
参考链接：
什么是BFC:blog.csdn.net/sinat\_3642…
纯css实现背景色切换：juejin.cn/post/684490…
margin不重叠的情形：www.cnblogs.com/jiaoyu121/p…
* {margin: 0px;padding: 0px;}ul,li {list-style: none;}.box {width: 300px;height: 600px;margin: 0 auto;position: relative;}.box .bg {width: 300px;height: 600px;position: absolute;top: 0;left: 0;}.bg:target {z-index: 10;}.box .bg:not(:target) {z-index: 0;}.box1 {z-index: 10;}#box1 {background-color: beige;}#box1:target {background-color: beige;}#box2:target {background-color: pink;}#box3:target {background-color: cyan;}.nav {width: 120px;height: 40px;border-radius: 20px;background-color: #fff;position: absolute;top: 20px;right: 20px;z-index: 15;}.nav li {/* border: 1px solid pink; */margin: 5px;float: left;}.nav li a {display: block;width: 30px;height: 30px;background-color: pink;border-radius: 50%;}.nav li:first-child a {background-color: beige;/* border-color: beige; */}.nav li:last-child a {background-color: cyan;/* border-color: cyan; */}
<div class="box"> <div id="box1" class="box1 bg"></div> <div id="box2" class="bg"></div> <div id="box3" class="bg"></div> <div> <ul class="nav"> <li><a href="#box1"></a></li> <li><a href="#box2"></a></li> <li><a href="#box3"></a></li> </ul> </div> </div>
