notTarget和z-index的问题
来源：7-8 切换背景图像综合练习题
麓鹿不迷路
2018-06-09 13:25
1. .bg:not(:target) 这句代码是什么意思，是不是缩写了？什么时候触发？是点别的img的时候吗？
2.z-index的问题。如果没有:not(:target)的代码，切换点击缩略图时，动画展示时的底层图片总是最后一张图；但有了这个代码，切换时底层图片是上一次点击的图片。这是为什么呢？
写回答
关注
1回答
-
- __小叶子_
- 2018-06-30 17:30:20
1、.bg:not(:target)，意思是所有没被触发的选择器的样式，:not(条件)，非括号里面的类型。
通过点击锚点类似a<a href="#bg1"></a>触发，链接到id为bg1的元素。
例如你点击了第一个，那么其他4个img就是.bg:not(:target)，第一个就是#bg1:target。这样第一个图片通过入场动画显示出来，其他四个因为img.bg设置了z-index为1，层级在下面，就会被第一个的z-index:100覆盖。
2、同第一个图片，z-index是显示的层级。可以理解为x、y构成二维平面，那么z就是第3维，就像我们很多放在一起的纸的顺序。
十天精通CSS3
本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备
242220 学习 · 2623 问题
相似问题