css選擇器順序的小技巧

css選擇器順序的小技巧

• 線上演示1
•  本地下載

css的選擇器的順序其實很有意思，如果應用的好的話，可以做一些簡單的邏輯出來，配合上css3，就可以儘可能的脫離js了。

這裡的演示是一個帶有hover事件的四張照片，效果來自一個國外優秀單頁，我在recode的時候做的，看原始碼他應該是用的js，我這裡改成了css做，正好可以演示一下css選擇器的順序技巧。

首先是li標籤的樣式，這裡就不說了，主要說一下hover的操作。

顯示ul的hover，讓所有的li標籤縮短寬度。

        
        
                
                
                        
                        
                                .dynamic_photo_album:hover >li {width:258px}
                        

                

        

 然後是當li標籤的hover，讓所hover的li標籤擴充套件。還有加顏色。

        
        
                
                
                        
                        
                                .dynamic_photo_album > li:hover{-webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);width:526px}
                        

                

        

加顏色用filter，這東西挺亂的，引數大家自己查一下吧。

你看，只是：hover的順序改變了，卻又很大的不同，而且效果也很不錯~ 有時間出程式碼錄播~

ps:最近有朋友下我那個主頁的原始碼，說除了主頁其餘的內頁沒內容，這個是因為大多數瀏覽器對ajax load 操作本地檔案不支援，要麼架一個apache什麼的伺服器，要麼就用Firefox瀏覽器，都是可以的~