如何使用 CSS 的 nth-child 选择器选中多个元素

上周，我在一个项目中用CSS的nth-child选择器选了几个元素。
我试了两种方法，一种是用逗号分隔的选择器列表，另一种是公式（an+b）。

比如，我想选中div.modal-content下的第2 和第3 个 p:nth-child(2 ), div.modal-content > p:nth-child(3 ) { background-color: red; }。
这个方法适合选择少量、不连续的子元素。

不过，如果我要选择连续的子元素，比如所有偶数位置的 p:nth-child(2 n) { background-color: blue; }。

两种方法各有千秋。
逗号分隔的选择器列表适合少量元素，代码直观。
而公式适合大量或规律性元素，能减少代码重复。

不过，我也要注意几点。
比如，如果父元素的子元素经常增减，我可能需要结合JavaScript动态添加类名，避免硬编码位置。
还有，nth-child选择器默认从1 开始计数，跟JavaScript数组的索引从0开始不同。

总之，根据需求选择合适的方法，可以让CSS代码更高效、更易于维护。
你看着办吧。

如何使用 CSS nth-child 选择器选择多个元素

2 02 2 年，我在某个城市的一个项目里，负责网页的样式设计。
那天，项目组的同事突然问起，如何用CSS nth-child选择器来同时选择多个元素，我愣了一下，当时也懵。
他给我解释说，通过逗号分隔多个独立的nth-child选择器，就能选中连续的多个子元素。
我听明白了，但心里还在琢磨。

他说，比如选择父元素下的第2 、3 个 p:nth-child(2 ), div.modal-content > p:nth-child(3 ) {background-color:red; }。
我当时也没太在意，只是觉得这方法挺直接。

后来，我慢慢发现，nth-child选择器还可以选择非连续的多个元素，方法也是一样的，只是位置参数不同。
比如说，选择第3 、5 个 p:nth-child(3 ), div.modal-content > p:nth-child(5 ) {background-color:red; }。

我还发现，通过结合nth-child(n+...)可以实现范围选择，虽然不能直接选择非连续元素，但可以通过公式选择从某位置开始的所有元素，再与其他选择器组合。
我试了试，效果还不错。

然后，我看了几个完整的代码示例，比如这个：<body>ButtonExample

Element1

Element2

Element3

Element4

Element5

Element6