CSS nth-child 选择器基础知识
今天我们来回顾一些 CSS 基础知识。我经常在文章中使用 nth-child 选择器。
但这让我意识到，我还没有真正掌握使用第 n 个子元素选择器的基础知识。
今天我们将探讨这个强大的 CSS 选择器的各种选项以及一些示例。
第 N 个子基本选择器
我们先从使用一些基本选择器开始。
我们可以定义要选择的元素。
例如，假设我们要选择第三个元素。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
li:nth-child(3) {
color: green;
}
结果：
奇数/偶数选择器
我们可以利用这些属性选择所有奇数或偶数代码。
li:nth-child(odd) {
color: red;
}
结果：
li:nth-child(even) {
color: blue;
}
结果：
每个 x 选择器
我们做的一件很酷的事情是选择每 x 个元素，所以假设我们想要每四个元素中的一个：
li:nth-child(4n) {
color: purple;
}
结果：
或者，如果我们想把第一个也包括进去：
li:nth-child(4n+1) {
color: purple;
}
结果：
我们也可以从第二个例子开始：
li:nth-child(4n+2) {
color: purple;
}
结果：
除了第一个选择器之外的所有内容
我们甚至可以设置一个选择器，表示选择除前三个元素之外的所有内容。
li:nth-child(n+4) {
color: teal;
}
结果：
仅限第一个数字选择器
我们还可以做一件很棒的事情：只选择前 x 个数字。
让我们取前三个。
li:nth-child(-n+3) {
color: teal;
}
结果：
选择最后一个元素
我们甚至可以选择最后一个元素。
li:last-child {
color: orange;
}
结果：
这样，我们还可以进行偏移，得到倒数第二个值。
li:nth-last-child(2) {
color: orange;
}
结果：
组合选择器
我们甚至可以组合使用选择器！
假设你想从一个奇数个数字的列表中找出所有偶数。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
ul:nth-child(odd) li:nth-child(even) {
color: orange;
}
这样就能得到所有奇数ul，然后再得到所有偶数li。
结果：
不妨在这个 Codepen 上玩玩，尝试更改一些选择器，看看会发生什么！
浏览器支持
nth-child 选择器兼容性很好，几乎可以在所有浏览器中使用。
请放心使用。
感谢阅读，让我们保持联系！
感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。
文章来源：https://dev.to/dailydevtips1/css-nth-child-selector-basics-41cc