今天由於在做任務13，裡面有一個子任務是要求用css寫出一個簡單的圖片輪播，剛開始真的是完全沒有思路，想著不用js怎麼繫結點選事件呢，看了別人的一些實現方法，發現:target是一個神奇的東西。

如果想看用css3實現的圖片輪播，狠狠點選這裡demo

剛開始接觸:target時，真的是一頭霧水，覺得這個是個什麼東西，怎麼能處理點選事件呢。看了差不多五六篇部落格還有簡介吧，突然醒悟，這不就也是一個選擇器嘛，只不過功能高大上了點而已。
具體說明高大上功能之前，先來“接地氣”的說一下基本概念：

它用來匹配文件(頁面)的URI中某個標誌符的目標元素。具體來說，URI中的標誌符通常會包含一個”#”字元，然後後面帶有一個標誌符名稱，比如#respond，target就是用來匹配ID為respond的元素的。

那它的功能到底高大上在哪呢，就是它可以根據你當前的點選的元素動態的有選擇性的連結到對應的元素上，比如下面的程式碼塊

        <div id="img1">
            <div id="img2">
                <div id="img3">
                    <ul class="mainImg">
                        <li></li>
                        <li></li>
 

                        <li></li>
                    </ul>
                </div>
            </div>      
        </div>      
        <ul class="controller"> 
            <li><a href="#img1">1</a></li>
            <li><a href="#img2"
 
>2</a></li>
            <li><a href="#img3">3</a></li>
        </ul>

不要被這個嵌套了n多層div的程式碼嚇到了啊，其實這是用css實現圖片輪播的無奈之舉，因為沒有選擇父級的選擇器。好，現在點選1，那麼文件就會自動定位到#img1，也就是id為img1的div元素。同理，點選2，文件就會自動定位到id為img2的div元素。定位到id為img2的div元素，就相當於用ID選擇器#img2定位。

這樣接下來再想選擇什麼元素就隨心所欲了，比如選擇類名為mainImg的div元素，就可以這麼寫#img1:target .mainImg 表示的是當目標元素為#img1時,它的子元素.mainImg的樣式變化。