CSS ul li單雙行效果,也稱“斑馬線效果”,可以提高頁面的美觀和可讀性。一般情況下,我們對于列表元素都會將其左側的符號去掉,然后橫向排列。但是,如果每個元素之間都有顏色或者背景色的區別,一眼就可以看出哪一行是哪一個項目,這樣就能很好的提高用戶的瀏覽體驗。
ul li:nth-child(odd) { background-color: #f2f2f2; } ul li:nth-child(even) { background-color: #fff; }
以上代碼中,:nth-child(odd)表示選擇列表元素的奇數行,而:nth-child(even)則表示選擇列表元素的偶數行。我們可以在這兩個選擇器里面添加不同的背景色或者樣式,實現不一樣的效果。當然,也可以自己根據需要調整選擇器,比如從第三個子元素開始奇數行顯示背景色。
ul li:nth-child(3n+1), ul li:nth-child(3n+2) { background-color: #f2f2f2; } ul li:nth-child(3n) { background-color: #fff; }
以上代碼是將從第三個元素開始,每隔三個元素顯示不同的顏色背景。
總之,CSS ul li單雙行效果可以讓頁面更加優美,也可以讓用戶更加容易瀏覽列表信息。