CSS選擇中間幾個子元素是很常見的需求,比如想對一組列表項的中間幾項進行樣式調整,或者對一組圖片的中間幾張進行特殊處理,這時我們就需要用到CSS選擇器的“:nth-child()
使用“:nth-child()”選擇器時,我們需要在括號內指定要選擇的子元素的位置,可以使用數字或者表達式表示。例如,“:nth-child(3)”表示選擇第3個子元素,“:nth-child(2n)”表示選擇偶數位置的子元素,等等。
/* 選擇第2到第4個子元素 */ li:nth-child(n+2):nth-child(-n+4) { background-color: #ccc; } /* 選擇第4、5、6個子元素 */ img:nth-child(n+4):nth-child(-n+6) { border: 2px solid red; }
使用“:nth-child()”選擇器可以方便地選擇中間幾個子元素,并且還可以通過表達式靈活地指定要選擇的子元素的范圍。