nth-child(3n)失效因按dom顺序计数而非视觉列位置，需用nth-of-type(3n)并确保ul下仅含li、无空白节点，或改用grid的gap方案。
用 nth-child(3n) 去掉右侧重复边框，但别直接套用
直接写 li:nth-child(3n) { border-right: none; } 看似合理，实际在多数结构里会失效——因为 nth-child 按 DOM 顺序计数，不看视觉列位置。比如 <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>...</ul> 中第 3、6、9 个 li 确实是每行末尾，但前提是：HTML 是纯线性排列、无其他兄弟节点、且 CSS 未用 order 扰乱流式顺序。
常见翻车场景：
- 父容器用了
flex-direction: column或grid-auto-flow: column，此时视觉“最后一列” ≠ DOM 第 3/6/9 个 -
ul里混了注释、文本节点或隐藏li（如display: none），nth-child仍会计入它们 - 用
float或inline-block布局时，DOM 顺序和视觉行列完全脱钩
真正可靠的列末边框清除：用 nth-of-type(3n) + 严格 HTML 结构
nth-of-type 只匹配同类型元素（即只数 li），比 nth-child 更抗干扰。但它依然依赖「每行恰好 3 个 li」这个前提。
实操要点：
- 确保
ul下只有li，不要有空格文本节点（把 HTML 写成<ul> <li>1</li> <li>2</li>...</ul>，别换行留空格） - 给所有
li统一设border: 1px solid #ccc; - 再用
li:nth-of-type(3n) { border-right: none; }清右侧边框 - 同理，
li:nth-of-type(n+7) { border-bottom: none; }清最后一行底边框（7/8/9 是第 3 行）
注意：如果九宫格是响应式（比如小屏变两列），这套规则会立刻错位——nth-of-type(3n) 不感知断行，它永远按原始 9 个元素算。
Grid 布局下根本不用 nth- 选择器去边框
Grid 天然支持间隙控制，gap 是最干净的“伪边框”方案，但要注意它不是真实边框：
-
gap: 1px只是留白，若父容器和子项背景色相同，就看不见“线” - 真要模拟边框线，得用容器
background-color+ 子项padding露出背景，例如：.grid { display: grid; grid-template-columns: repeat(3, 1fr); background-color: #ccc; /* 边框色 */ } .grid > div { background-color: #fff; /* 内容底色 */ padding: 2px; /* 露出两侧 2px 宽的容器背景 */ } - 绝对不要给子项设
border再配gap，否则边框和 gap 会叠加，视觉错乱
Flex 布局中边框重叠的本质是 margin 负值没对齐
Flex 九宫格常用 margin-right/bottom 模拟间隔，但右侧/底部边框会因 margin 未归零而撑开容器。典型错误写法：li { margin: 0 10px 10px 0; } —— 这会让第 3/6/9 个元素仍有 margin-right，导致右边框外溢。
正确解法分两步：
- 先统一设
margin: 0 10px 10px 0; - 再用
li:nth-of-type(3n) { margin-right: 0; }和li:nth-of-type(n+7) { margin-bottom: 0; }精准归零 - 如果用了
flex-wrap: wrap且容器宽度不整除，第 7/8/9 项可能被挤到第 4 行，此时n+7就失效了——必须配合固定容器宽高或min-width锁定三列
最易被忽略的一点：边框重叠问题从来不是“选对 nth-xxx 就能解决”，而是布局模型、DOM 结构、CSS 渲染层三者共同作用的结果。盲目套选择器，不如先确认你用的是哪一层布局逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
