css選擇器：nth-child()的相關(guān)用法
前言
:nth-child() 選擇器，該選擇器選取父元素的第 N 個(gè)子元素，與類型無關(guān)，公式通用。
一、列表中的偶數(shù)標(biāo)簽 :nth-child(2n)
/* 偶數(shù) */
li:nth-child(2n) {
color: skyblue;
}
二、列表中的奇數(shù)標(biāo)簽 :nth-child(2n+1)
// 奇數(shù)
li:nth-child(2n+1) {
color: skyblue;
}
三、選擇從第6個(gè)開始，直到最后 :nth-child(n+6)
/* 選擇從第6個(gè)開始，直到最后 */
li:nth-child(n+6) {
color: skyblue;
}
四、選擇第1個(gè)到第6個(gè) :nth-child(-n+6)
/* 選擇第1個(gè)到第6個(gè) */
li:nth-child(-n+6) {
color: pink;
}
五、選擇第6個(gè)到第9個(gè)
/* 選擇第3個(gè)到第6個(gè) */
li:nth-child(n+3):nth-child(-n+6) {
color: pink;
}
六、補(bǔ)充 :nth-of-type(n)
:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素，n 可以是數(shù)字、關(guān)鍵詞或公式。
/* 補(bǔ)充 :nth-of-type(n) */
li:nth-of-type(2n+1) {
color: violet;
}
七、從倒數(shù)第六個(gè)開始變色
/* 倒數(shù)第六個(gè)開始變色 */
li:nth-last-child(-n+6) {
color: aqua;
}
