css li:nth-child用法

‌CSS中的:nth-child伪类选择器用于选择一组子元素中的特定元素，并对其应用样式。li:nth-child特别用于选择列表中的元素。‌

基本用法

1. ‌选择第一个元素‌：使用:first-child选择器。例如，选择第一个<li>元素并将其字体颜色设置为红色：
    
   li:first-child { color: red; }
2. ‌选择最后一个元素‌：使用:last-child选择器。例如，选择最后一个<li>元素并将其字体颜色设置为绿色：
    
   li:last-child { color: green; }
3. ‌选择第n个元素‌：使用:nth-child(n)。例如，选择第三个<li>元素并将其字体颜色设置为蓝色：
    
   li:nth-child(3) { color: blue; }
4. ‌选择奇数或偶数元素‌：使用:nth-child(odd)选择奇数元素，使用:nth-child(even)选择偶数元素。例如，将奇数<li>元素的背景色设置为灰色：
    
   li:nth-child(odd) { background-color: #999; }
5. ‌使用公式选择特定范围的元素‌：可以使用更复杂的公式来选择特定范围的元素。例如，:nth-child(n+4)选择从第4个元素开始的每个元素，:nth-child(-n+4)选择前4个元素。例如，将前4个<li>元素的背景色设置为黄色：
    
   li:nth-child(n+4) { background-color: yellow; }
6. ‌选择倒数第n个元素‌：使用:nth-last-child(n)。例如，选择倒数第二个<li>元素并将其字体颜色设置为红色：
    
   li:nth-last-child(2) { color: red; }

高级用法和技巧

1. ‌使用公式自定义选择‌：可以使用更复杂的公式来选择特定的元素。例如，:nth-child(3n+1)表示每隔两个元素选择一个，:nth-child(2n)表示选择所有偶数位置的元素。例如，将每隔两个元素的背景色设置为浅灰色：
    
   li:nth-child(3n+1) { background-color: #f2f2f2; }
2. ‌结合使用‌：可以结合使用不同的:nth-child伪类来选择更复杂的元素组合。例如，先选择前三个元素，再选择奇数元素：
    
   li:nth-child(-n+3):nth-child(odd) { color: red; }