:target的伪类的用法

:target
当我们点击链接()时，对应id的元素显示在当前页面。

position:absolute;让大图进行叠加

z-index;的值的大小哪个显示在第一个/点击锚点之后哪个显示

案例：

        ul {
            list-style-type: none;
        }
        
        .target_a {
            overflow: hidden;
        }
        
        .target_a li {
            width: 100px;
            height: 80px;
            float: left;
            margin-right: 5px;
        }
        
        .target_ali:last-child {
            margin-right: 0px;
        }
        
        .target_a li img {
            width: 100%;
            height: 100%;
        }
        
        .target_img {
            position: relative;
            top: 0;
        }
        
        .target_img li {
            width: 310px;
            height: 280px;
            position: absolute;
        }
        
        .target_img li img {
            width: 100%;
            height: 100%;
        }
        
        #target01 {
            z-index: 5;
        }
        
        #target02 {
            z-index: 3;
        }
        
        #target03 {
            z-index: 0;
        }
        
        .target_img li:target {
            z-index: 10!important;
        }