CSSはいくつかのラベル要素を選択します:nth-child(n)、first-child、last-child

前言:今日コードの时に出会った需要は前の2つのラベル要素を选んで、资料を调べて记录します~

nth-child(n)、first-child、last-childの使い方

注意:nth-child(n)セレクタは、親要素のn番目のサブ要素と一致します.nは、数値、キーワード、または式であってもよい.
nth-child(n)用法:1、nth-child(3)は選択リストの3番目のラベルを表し、コードは以下の通りである.

li:nth-child(3){background:#fff}

2、nth-child(2 n)は、選択リストの偶数のラベル、すなわち第2、第4、第6…のラベルを選択し、コードは以下の通りである.

li:nth-child(2n){background:#fff}

3、nth-child(2 n-1)は選択リストの奇数のラベルを表し、すなわち第1、第3、第5、第7…のラベルを選択し、コードは以下の通りである.

li:nth-child(2n-1){background:#fff}

4、nth-child(n+3)は、選択リストのラベルが3番目から最後までであることを示し、コードは以下の通りである.

li:nth-child(n+3){background:#fff}

5、nth-child(-n+3)は、選択リストのラベルが0から3、すなわち3未満のラベルを表し、コードは以下の通りである.

li:nth-child(-n+3){background:#fff}

6、nth-last-child(3)は選択リストの最後から3番目のラベルを表し、コードは以下の通りである.

li:nth-last-child(3){background:#fff}

first-child用法:1、first-child first-childは選択リストの最初のラベルを表す.コードは次のとおりです.

li:first-child{background:#fff}

Last-child用法:1、last-child last-childは選択リストの最後のラベルを表し、コードは以下の通りである.

li:last-child{background:#fff}