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