:target的伪类的用法

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

position:absolute;让大图进行叠加

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

案例：

    <ul class="target_a">
        <li>
            <a href="#target01"><img src="./images/5a549f9127cc0.jpg" alt=""></a>
        </li>
        <li>
            <a href="#target02"><img src="./images/52c6226bcf16f.jpg" alt=""></a>
        </li>
        <li>
            <a href="#target03"><img src="./images/5358d93f990f9.jpg" alt=""></a>
        </li>
    </ul>
    <ul class="target_img">
        <li id="target01"><img src="./images/5a549f9127cc0.jpg" alt=""></li>
        <li id="target02"><img src="./images/52c6226bcf16f.jpg" alt=""></li>
        <li id="target03"><img src="./images/5358d93f990f9.jpg" alt=""></li>
    </ul>

        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;
        }