在CSS中,我們經(jīng)常需要選擇多個(gè)子級來添加相同或不同的樣式,這里介紹幾種方法。
/* 選擇所有子級 */ .parent * { /* 樣式 */ } /* 選擇第一個(gè)子級 */ .parent :first-child { /* 樣式 */ } /* 選擇最后一個(gè)子級 */ .parent :last-child { /* 樣式 */ } /* 選擇偶數(shù)位子級 */ .parent :nth-child(even) { /* 樣式 */ } /* 選擇奇數(shù)位子級 */ .parent :nth-child(odd) { /* 樣式 */ } /* 選擇第n個(gè)子級 */ .parent :nth-child(n) { /* 樣式 */ } /* 選擇1~3個(gè)子級 */ .parent :nth-child(-n+3) { /* 樣式 */ } /* 選擇3~n個(gè)子級 */ .parent :nth-child(n+3) { /* 樣式 */ } /* 選擇從第n個(gè)到第m個(gè)子級 */ .parent :nth-child(n+m) { /* 樣式 */ } /* 選擇所有子級中前三個(gè) */ .parent *:first-child:nth-child(-n+3) { /* 樣式 */ } /* 選擇不是第一個(gè)的子級 */ .parent *:not(:first-child) { /* 樣式 */ } /* 選擇不是最后一個(gè)的子級 */ .parent *:not(:last-child) { /* 樣式 */ } /* 選擇第一個(gè)子級和最后一個(gè)子級 */ .parent :first-child, .parent :last-child { /* 樣式 */ }
以上就是選擇多個(gè)子級的方法,可以靈活運(yùn)用來達(dá)到所需要的效果。