CSS3中的偽類選擇器讓我們在樣式化元素時更加靈活,其中包括單偶選擇器。單偶選擇器可以通過選擇某一元素在列表中的位置來為其添加特定樣式。下面我將為大家詳細介紹單偶選擇器。
/* :nth-child(odd) 代表選擇列表中的奇數項 */ li:nth-child(odd) { background-color: #f1f1f1; } /* :nth-child(even) 代表選擇列表中的偶數項 */ li:nth-child(even) { background-color: #ffffff; } /* 也可以直接使用 :nth-of-type() 來選擇偶數項 */ li:nth-of-type(even) { background-color: #ffffff; }
上述代碼中,我們首先使用:nth-child(odd)來選擇列表中的奇數項(即第1項,第3項,第5項……),并將其背景色設為淺灰色。然后我們再使用:nth-child(even)來選擇列表中的偶數項(即第2項,第4項,第6項……),并將其背景色設為白色。這樣,我們就成功地實現了對列表奇偶行的加色。
除了:nth-child()外,我們還可以使用:nth-of-type()來選擇類型為某一標簽的元素,并結合even/odd來選擇偶數/奇數元素。此時,在列表中,只會選擇那些與其他同類型元素順序相同的元素,比如一個有多個div元素的頁面,我們只會選擇其中的偶數個div元素。
需要注意的是,如果我們在列表中還有其他類型的元素存在,那么選擇器就會按照在DOM樹中的先后順序選擇元素。因此,當我們在使用:nth-child()或:nth-of-type()時,應盡量將其包裹在包含選擇器的元素內。
總之,單偶選擇器為我們的頁面布局提供了便利,讓我們更加方便地為列表中的元素添加樣式。
上一篇css3使用環境