通过目标伪类实现图片切换

说起图片切换，我们首先会想到定位+display：hidde的方法，然后点击某个图片时做排他然后使点击的图片显示。
下面我们来说目标伪类实现图片切换的方法，可以很简单的实现图片切换效果。
首先我们来介绍一下目标伪类。

它匹配文档URI中标识符的目标元素。

URI中的这个标识符包含一个“#”字符，后面跟着一个与文档中某个元素的id属性值匹配的标识符名称。

目标伪类选择器需要IE9以及以上，opera9.6以及以上，还有所有版本的chrome，FF，Safari都支持。

如下代码。

<!--大图-->
    <ul id="banner">
        <li id="jd1" class="firstLi"><img src="img/jd001.jpg" alt=""></li>
        <li id="jd2"><img src="img/jd002.jpg" alt=""></li>
        <li id="jd3"><img src="img/jd003.jpg" alt=""></li>
        <li id="jd4"><img src="img/jd004.jpg" alt=""></li>
        <li id="jd5"><img src="img/jd005.jpg" alt=""></li>
        <li id="jd6"><img src="img/jd006.jpg" alt=""></li>
    </ul>
    <!--小图列表-->
    <ul id="list">
        <li><a href="#jd1"><img src="img/jd001.jpg" alt=""></a></li>
        <li><a href="#jd2"><img src="img/jd002.jpg" alt=""></a></li>
        <li><a href="#jd3"><img src="img/jd003.jpg" alt=""></a></li>
        <li><a href="#jd4"><img src="img/jd004.jpg" alt=""></a></li>
        <li><a href="#jd5"><img src="img/jd005.jpg" alt=""></a></li>
        <li class="las   ；tLi"><a href="#jd6"><img src="img/jd006.jpg" alt=""></a></li>
    </ul>

 #banner li:target{
            z-index: 2;
        }

当我们点击的锚链接以#banner中的li元素所具有的ID为目标值时，相应的li层级提升，实现了图片切换的效果。