1. .bg:not(:target) 这句代码是什么意思,是不是缩写了?什么时候触发?是点别的img的时候吗?
2.z-index的问题。如果没有:not(:target)的代码,切换点击缩略图时,动画展示时的底层图片总是最后一张图;但有了这个代码,切换时底层图片是上一次点击的图片。这是为什么呢?
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维,就像我们很多放在一起的纸的顺序。