本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 600+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 CSS 代码片段，使用CSS的伪类选择器实现了对特定位置列表项的样式控制。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
li:nth-child(-n + 3) {
text-decoration: underline;
}
li:nth-child(n + 2):nth-child(-n + 5) {
color: #2563eb;
}
li:nth-last-child(-n + 2) {
text-decoration-line: line-through;
}
分享原因
这段代码展示了如何使用CSS的 nth-child 和 nth-last-child 伪类选择器来选择和样式化特定的列表项，这在复杂的样式需求中非常有用。
理解6和使用这些选择器，在项目中写样式的时候真的会是水到渠成，最起码不需要再费劲去想一个新类名了。
代码解析
1. li:nth-child(-n + 3)
n是从0开始的非负整数。
nth-child(-n + 3) 选择器会选中父元素的前三个子元素。
其中，-n + 3 表示选择从第一个元素开始直到第三个元素的所有子元素。
2. li:nth-child(n + 2):nth-child(-n + 5)
nth-child(n + 2) 选择器从第2个子元素开始选择。
nth-child(-n + 5) 选择器从第1个子元素选择到第5个子元素。
组合使用时，会选中从第2个到第5个子元素。
3. li:nth-last-child(-n + 2)
nth-last-child(-n + 2) 选择器从父元素的最后一个子元素向前数，选择倒数前两个子元素。
- end -
