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

在線演示

本地下載

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

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

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

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

.......

原文來自：css選擇器順序的小技巧