cssでのnth-child、first-child、last-childの使用(最初、いくつ目、いくつ目からいくつ目、最後などを選択)

817 ワード

liラベルと組み合わせて使用し、列のラベルを選択できます.
 1.first-child選択リストの最初のラベル
 2.Last-child選択リストの最後のラベル
li:first-child{color:red}
li:last-child{color:pink}

 3.nth-child(n)
ここでnは数字であり、選択リストのn番目のラベルを表す
例えば3番目のラベルを選択
li:nth-child(3){color:pink}

 4.nth-child(2n) 
リストの偶数を選択し、2、4、6…個のラベルを選択します.
li:nth-child(2n){color:pink}
li:nth-child(2n-1){color:pink}


 5.同理nth-child(2 n-1)は奇数ビットラベルが選択されていることを示します
 6.4番目から最後のラベルを選択します.この4は必要な数字に変えることができます.
li:nth-child(n+4){color:pink}

 7. 1番目から4番目までの数字4を選択しても、必要に応じて置き換えることができます.
li:nth-child(-n+4){color:pink}

 8.nth-last-child(3)は最後の3つのラベルを表す
li:nth-last-child(3){color:pink}

あなたの役に立つことを願っています.