给列表做隔行变色大概是CSS里最古老的需求之一，一行li:nth-child(2n)就能让表格和列表立刻拥有斑马纹。但这个看似人畜无害的选择器，一旦遇到混合内容布局就会频繁翻车：信息流中间插了一条广告卡片，评论区顶部置顶了一条公告，列表上方多出一个筛选条，斑马纹立刻错位，奇偶行完全对不上。不少人遇到这种情况会反复在2n和2n+1之间调整，甚至怀疑浏览器渲染出了问题，实际上症结出在对nth-child计数规则的理解偏差上。这篇文章先把它的匹配机制拆开讲透，再给出一套能真正应对混合内容的落地方案。
nth-child的计数机制：它数的是位置，不是类型
先说结论：:nth-child(an+b)统计的是父元素下所有同级兄弟元素的位置，跟元素是什么类型、带什么class没有任何关系。当你写下.card:nth-child(2n)时，它的含义是“既是.card、又恰好排在父元素偶数位的元素”，而不是“卡片列表里的第2、4、6张卡片”。这两句话听起来差不多，在纯净的列表里效果也完全一致，可一旦混入其他元素，差异就会立刻暴露。
看一段典型的失效代码。信息流里有四张文章卡片，中间第三位插了一张广告：
<div class="feed"> <article class="card">第 1 张文章卡片</article> <article class="card">第 2 张文章卡片</article> <div class="ad">广告卡片</div> <article class="card">第 3 张文章卡片</article> <article class="card">第 4 张文章卡片</article> </div>
/* 本意：给偶数位的文章卡片加底色 */
.feed .card:nth-child(2n) {
background: #f2f4f8;
}
/* 实际命中情况 */
/* 第 2 张卡片：父元素的第 2 个子元素，命中，符合预期 */
/* 第 3 张卡片：父元素的第 4 个子元素，命中，但它在卡片序列里是奇数位 */
/* 第 4 张卡片：父元素的第 5 个子元素，不命中 */广告卡片占据了第3位，把后面所有卡片的整体位置都顶偏了一位。于是第3张卡片明明在卡片序列里排奇数位，却因为整体排第4而被染上底色，第4张卡片反而没有背景。列表越长、插入的杂项越多，错位就越严重。理解了这一点就会明白：问题不在写法上，而在计数口径上，nth-child的口径是“兄弟位置”，而业务想要的口径是“同类内容的位置”。
三种选择器的差异：nth-child、nth-of-type与nth-last-child
这一族选择器最容易混淆，先看三者的计数范围差异：
| 选择器 | 计数范围 | 典型适用场景 |
|---|---|---|
:nth-child(an+b) | 父元素下所有同级兄弟元素 | 结构纯净的列表、表格行 |
:nth-of-type(an+b) | 父元素下同标签名的兄弟元素 | 文档流中混入不同标签的场景 |
:nth-last-child(an+b) | 所有同级兄弟，从末尾倒数 | 从后往前定位，如最后几项 |
针对上面的信息流，如果广告用的是<div>而卡片用的是<article>，把nth-child换成nth-of-type就能直接修复：
/* 只在 article 标签之间计数，div 广告不参与 */
.feed article:nth-of-type(2n) {
background: #f2f4f8;
}这个方案简洁有效，但它有一个隐藏前提：杂项元素和目标元素的标签名必须不同。nth-of-type只按标签名过滤，不看class。现实项目里，广告卡片和文章卡片常常都是<div>或者都是<li>，仅靠class区分，这种情况下nth-of-type同样会失效，因为五六个<div>在它眼里是同一类。另外提一句，nth-last-child和nth-last-of-type只是把计数方向反过来，从最后一个兄弟往回数，匹配规则与正数版本完全一致，适合做“倒数第几项”之类的定位。
混合内容下的四种解决方案
方案一：标签分层，用nth-of-type。如果能在结构上做约束，让广告、公告这类插入内容使用与正文不同的标签，nth-of-type就是成本最低的解法，一行选择器搞定，无需任何额外标记。它的缺点是依赖团队长期遵守标签约定，一旦有人在列表里塞了个同标签的元素，样式又会悄悄错位。
方案二：使用of语法，按子集计数。CSS选择器第四级规范给nth-child扩展了一个非常对症的语法，允许在括号里传入一个子选择器，让计数只发生在匹配该选择器的元素之间：
/* 在 .card 这个子集内部做奇偶计数，广告无论插在哪都不参与 */
.feed :nth-child(2n of .card) {
background: #f2f4f8;
}
/* 也可以做更精细的定位，比如选中卡片子集里的第 3 张 */
.feed :nth-child(3 of .card) {
border-left: 3px solid #3b82f6;
}这段代码的语义是“在.feed的子元素中，先筛出带.card的那一批，再在这一批里做2n计数”，与业务想要的口径完全一致。兼容性方面，Safari从9版本起就支持该语法，Chrome在111版本、Firefox在113版本陆续跟进，目前主流浏览器已经全部覆盖。如果项目还需要兼容旧内核的WebView或老版本浏览器，建议把它作为渐进增强来用，配合下面的兜底方案一起上。
方案三：结构分组，隔离计数范围。最朴素也最稳妥的思路：把需要交替样式的同类内容包进一个独立容器，让杂项元素游离在容器之外。nth-child只在同一个父元素的子元素之间计数，容器一隔离，广告插在前面、后面还是中间都无所谓：
<div class="feed">
<div class="ad">广告卡片</div>
<ul class="card-list">
<li class="card">第 1 张文章卡片</li>
<li class="card">第 2 张文章卡片</li>
<li class="card">第 3 张文章卡片</li>
<li class="card">第 4 张文章卡片</li>
</ul>
</div>
/* 计数范围被限制在 card-list 内部 */
.card-list li:nth-child(2n) {
background: #f2f4f8;
}它的代价是多了一层DOM嵌套。对于由后端模板或前端框架渲染的列表来说，这个结构通常很容易实现；但对于广告位置完全由运营在后台随机配置的场景，服务端需要把连续的卡片分段输出，实现成本会高一些。
方案四：渲染层打标，彻底绕开CSS计数。当插入位置完全动态、CSS层面无解时，可以在数据渲染阶段直接算好奇偶，给每个元素挂上明确的class。以原生JavaScript为例：
// 渲染完成后按可见内容重新打标，广告不占用奇偶位
const cards = document.querySelectorAll('.feed .card');
cards.forEach((card, index) => {
card.classList.add(index % 2 === 0 ? 'row-odd' : 'row-even');
});
.feed .row-even {
background: #f2f4f8;
}如果广告是通过脚本在页面加载后又动态插入的，可以配合MutationObserver监听容器变化，插入完成后重新执行一遍打标逻辑。这种方案把奇偶判断从CSS挪到了渲染层，牺牲了一点纯CSS的优雅，换来的是绝对稳定，任何插入行为都能被正确处理，也是不少大型信息流产品实际采用的做法。
容易被忽略的细节与常见误区
第一，nth-child的计数从1开始而不是0。:nth-child(1)匹配第一个子元素，:nth-child(0)永远不会命中任何东西。公式an+b里的n从0起取值，所以2n实际命中的是第2、4、6个位置，对应关键字even；2n+1命中第1、3、5个位置，对应odd。两种写法完全等价，团队里统一成一种即可。
第二，文本节点和注释不参与计数。nth-child只统计元素节点，HTML源码里的换行、缩进、空格以及注释节点都不会占用位置序号，所以“格式化代码导致样式错位”这种担忧是不存在的。真正会挤占序号的只有实实在在的元素标签，包括那些设置了display:none的隐藏占位块，它们看不见，但依然占着兄弟位置的坑。
第三，.card:first-child和.card:nth-child(1)踩的是同一个坑。它们都表示“第一个子元素如果恰好是.card”，而不是“第一张.card卡片”。当列表头部插了一个公告时，first-child同样会失效，很多人修好了nth-child却在first-child上二次翻车，原因就在这里。对应的替代品是:first-of-type，或者干脆用:nth-child(1 of .card)统一处理。
最后简单说说性能。nth-child属于结构伪类，浏览器在样式计算阶段就能完成匹配，单次成本很低，几百上千行的长列表也扛得住。真正需要留意的是选择器整体复杂度，比如.feed .card:nth-child(2n) .title span这种多层嵌套写法，右端匹配范围越小、层级越浅，样式重算越快。把交替样式控制在两层以内，基本不用担心性能问题。
总结一下：交替样式失效从来不是浏览器的问题，而是计数口径的问题。结构可控时优先用nth-of-type或结构分组；结构不可控、浏览器环境较新时，of语法是最优雅的答案；插入行为完全动态时，渲染层打标最可靠。理解了nth-child数的是“所有兄弟的位置”这一条底层规则，这一族选择器的所有行为就都能推演出来，也就不会再被错位的斑马纹打个措手不及。