有點費勁啊，沒有::before和::after的基礎 邏輯要很清楚才能實現
1、給每個縮略圖設置不同的圖片
提示：使用偽結構選擇器:nth-of-type()，并且配合::after
2、給每個縮略圖添加透明度蒙板效果
提示：使用偽類選擇器::before給縮略圖添加蒙板效果
3、鼠標懸浮在縮略圖上時，修改縮略圖上蒙板的透明度
提示：通過:hover和::before配合修改opacity的值為0
4、點擊縮略圖，切換背景圖片
提示：通過目標選擇器:target進行背景圖片的切換
5、控制不是被點擊圖片的層級大小，讓其不顯示
提示：通過“否定選擇器:not()”和“目標選擇器:target”來控制不是被切換的背景圖像不顯示
2016-02-01
關于:before和:after的問題，以前我都不知道有這個東西。看了之后才知道原來都可以用after和before在原有的基礎之上向前和向后插入對象。這個題目是一樣的道理的呀！用after來插入縮略圖并給出對于li的絕對定位，用before來添加一個形狀和after一樣大小的透明塊，用絕對定位使其位置和after的位置一致以達到蒙版的效果，再通過hover來改變透明度。通過target來切換背景圖。