CSS中的偶數指的是元素的序號或數量是偶數的情況。
/* 選擇所有偶數序號的元素 */ :nth-child(even) { … } /* 選擇所有偶數數量的元素 */ :nth-of-type(even) { … }
在實際使用中,偶數的選擇器經常用于網格布局或某些特定的樣式設計。
/* 網格布局實現 */ .item:nth-child(even) { grid-column: span 2; } /* 表格斑馬線樣式實現 */ tr:nth-child(even) { background-color: #f8f8f8; } /* 交替展示不同顏色樣式實現 */ article:nth-of-type(even) { background-color: #f5f5f5; }
需要注意的是,CSS中的序號從1開始而非0,因此第1、3、5...個元素為奇數,第2、4、6...個元素為偶數。
/* 選擇第2、4、6個元素 */ :nth-child(2n) { … } /* 選擇第3、6、9個p元素 */ p:nth-child(3n) { … }
總之,偶數選擇器是CSS中常用的選擇器之一,可以幫助我們輕松地實現某些特定的樣式效果。