:nth-child(2n+1)选中父容器内第1、3、5…个子元素，非视觉奇数行；因它仅按DOM顺序计数，无视换行、隐藏或CSS布局，表格中受thead等干扰时易错位，应优先用tr:nth-of-type(2n+1)或JS辅助实现视觉奇偶行。
:nth-child(2n+1) 确实能选中奇数位置的元素，但它选的是「父容器内第 1、3、5…个子元素」，不是视觉上“奇数行”的内容——这点极易误用，尤其在表格或 flex/wrap 布局里。
为什么 :nth-child(2n+1) 不等于“奇数行”
它只看 DOM 树中的顺序索引，不关心换行、隐藏、浮动或 CSS 排列方式。比如：
- 一个
<div>里有 6 个<span>，用display: flex; flex-wrap: wrap; width: 200px;排成两行（每行3个），:nth-child(2n+1)仍会选中第1、3、5个<span>，它们可能横跨两行 - 表格中如果某行有
colspan或被display: none隐藏，后续行的索引不会重排，:nth-child(2n+1)依然按原始序号算
真正想选“视觉奇数行”时该用什么
目前纯 CSS 没有通用方案，但可按场景选择：
- 标准表格（
<table>）：用tr:nth-of-type(2n+1)更稳妥——它只匹配<tr>类型元素，跳过<thead>、<tbody>等包裹节点，语义更准 - 固定列数的网格（Grid）：用
grid-row-start: odd不行（CSS 不支持），但可用grid-row: 1 / -1+ JS 动态加类；或改用grid-auto-flow: dense配合:nth-child()预设结构 - 需要响应式“每行 N 个”的列表：必须靠 JS 计算当前视口下的行首元素索引，再批量添加
.row-odd类
:nth-child(2n+1) 的正确使用场景和写法
它适合结构规整、无干扰子元素的线性列表，比如干净的 <ul><li> 或无合并单元格的 <tbody><tr>：
立即学习“前端免费学习笔记（深入）”；
ul li:nth-child(2n+1) {
background-color: #f5f5f5;
}
注意几个细节：
-
2n+1可简写为odd，效果完全等价，但可读性略低（尤其团队协作时） - 别和
:nth-of-type()混用：:nth-of-type(2n+1)会忽略非目标标签（如中间插了个<p>），而:nth-child会因索引偏移全错位 - 若父容器开头有注释节点、文本节点（哪怕只有一空格），
:nth-child也会把它们计入索引，导致第一个<li>实际是第2个子元素——务必检查 DOM 结构是否“纯净”
真正难的从来不是写对伪类，而是确认你选中的到底是“第几个孩子”，还是“第几行”。DOM 层级和视觉呈现之间那层抽象，CSS 目前还跨不过去。
