问答详情
源自:7-8 切换背景图像综合练习题

notTarget和z-index的问题


   1. .bg:not(:target) 这句代码是什么意思,是不是缩写了?什么时候触发?是点别的img的时候吗?

    2.z-index的问题。如果没有:not(:target)的代码,切换点击缩略图时,动画展示时的底层图片总是最后一张图;但有了这个代码,切换时底层图片是上一次点击的图片。这是为什么呢?


提问者:麓鹿不迷路 2018-06-09 13:25

个回答

  • __小叶子_
    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维,就像我们很多放在一起的纸的顺序。