CSS3同級選擇器可用于選擇同一父元素下的同級元素,其語法為“選擇器1 + 選擇器2”,表示選擇器2緊接在選擇器1后面的同級元素,舉例如下:
#list li + li { margin-top: 10px; }
以上代碼表示選擇#list下的所有l(wèi)i元素中,除第一個li元素外,其余l(xiāng)i元素均添加10像素的上邊距。
另一種常用方式是使用同一類名選擇器對同級元素進行選擇,以實現(xiàn)類名間的樣式繼承,例如:
.feature + .feature { margin-top: 20px; }
以上代碼表示選擇所有class為.feature的元素中,其后緊接的同級.class為.feature的元素,實現(xiàn)相差20像素的margin-top效果。
同級選擇器的應用場景有很多,例如在網(wǎng)頁布局中,可用于控制同一容器下不同元素的排列方式和樣式。