CSS中多個
li:nth-child(n) { /* 對于序號為n的li元素應(yīng)用樣式 */ }
在CSS中,我們經(jīng)常需要對多個
nth-child是一個偽類選擇器,它可以選擇父元素的第n個子元素,并對其應(yīng)用樣式。其中n可以是數(shù)字,也可以是關(guān)鍵字even(偶數(shù))或odd(奇數(shù))。
/* 對所有l(wèi)i元素應(yīng)用樣式 */ li { /* 樣式屬性 */ } /* 對所有偶數(shù)序號的li元素應(yīng)用樣式 */ li:nth-child(even) { /* 樣式屬性 */ } /* 對所有奇數(shù)序號的li元素應(yīng)用樣式 */ li:nth-child(odd) { /* 樣式屬性 */ } /* 對序號為3的li元素應(yīng)用樣式 */ li:nth-child(3) { /* 樣式屬性 */ } /* 對序號大于3的li元素應(yīng)用樣式 */ li:nth-child(n+3) { /* 樣式屬性 */ } /* 對序號小于等于3的li元素應(yīng)用樣式 */ li:nth-child(-n+3) { /* 樣式屬性 */ }
使用nth-child(n)偽類選擇器可以使樣式設(shè)置更加靈活。我們可以選擇具體的序號元素應(yīng)用特定樣式,也可以選擇奇偶數(shù)序號應(yīng)用不同樣式,甚至還可以通過簡單的數(shù)學(xué)計算來選擇特定范圍的序號元素。