Grid子项选择器必须作用于直接子元素；:nth-child按DOM顺序匹配，与视觉位置无关；属性选择器[grid-area="name"]可精准定位命名区域子项；hover应避免触发重排。
grid 子项的 class 选择器必须作用于直接子元素
Grid 布局中，display: grid 只影响其**直接子元素**（即网格子项）。如果你给某个子项内部再嵌套一层 div，并试图用 .grid > .item 选中它，那不会生效——因为那个内层 div 不是 grid 容器的直接子项。
常见错误现象：
.container {
display: grid;
}
.container > .cell { background: #eee; } /* 有效 */
.container > .wrapper > .cell { background: #eee; } /* 无效：.wrapper 阻断了直接子关系 */
- 检查 DOM 结构层级，确保目标元素确实是
grid容器的直系子节点 - 避免在 grid 容器里无意义地多套一层 wrapper —— 若需分组逻辑，改用
grid-template-areas或grid-row/column控制范围 - 用浏览器开发者工具的“Layout”面板确认元素是否被识别为 grid item（会显示 grid 线和序号）
:nth-child() 和 :nth-of-type() 在 grid 中的行为一致但易混淆
Grid 不改变 CSS 伪类的底层匹配逻辑。只要子元素在 DOM 中顺序连续，:nth-child(2) 就选中第二个子元素，不管它是否被 grid-column 移动过位置。
使用场景：想给第 3 个网格项加边框，但该元素实际渲染在左上角——仍用 :nth-child(3)，不是按视觉位置数。
-
:nth-child(n)按 DOM 顺序计数，与 grid 布局无关 -
:nth-of-type(n)还受限于元素类型（如只计div），在混合标签的 grid 中更易出错 - 如果需要按“视觉网格位置”选择（比如“第一行第二列”），必须配合
grid-row/grid-column的具体值写属性选择器：[style*="grid-row: 1"][style*="grid-column: 2"]（不推荐，维护性差）
用属性选择器精准控制 grid-area 命名区域的子项
当使用 grid-template-areas 定义命名区域时，每个子项通过 grid-area 属性关联名称。此时可直接用属性选择器定位，比 class 更语义化、更少依赖 DOM 顺序。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
<p>/<em> 选中所有 grid-area="main" 的子项 </em>/
.container > [grid-area="main"] {
padding: 1rem;
}</p><p>/<em> 注意：属性值必须完全匹配，区分大小写，且不能有空格 </em>/
.container > [grid-area=" main "] { /<em> 不会匹配 </em>/ }- 属性选择器对动态设置的
grid-area（如 JS 修改）依然有效 - 若多个子项共用同一
grid-area名称（如侧边栏复用），该选择器会同时命中全部 - 避免用
[grid-area]（存在即匹配），容易误伤未显式设值但继承默认值的元素
grid 子项上的 :hover 或 :focus-visible 触发时注意重排问题
给 grid 子项加 :hover 样式本身没问题，但如果触发的是 transform 以外的布局属性（如 width、margin、grid-column），会导致整个 grid 重排，可能引起其他子项跳动或闪烁。
- 优先用
transform: scale()或opacity实现悬停效果，它们不触发 layout - 若必须改变网格位置（如 hover 后占满整行），建议搭配
transition: grid-column 0.2s ease并测试不同浏览器下是否卡顿 - 在 flex/grid 容器中，
:focus-visible样式若含 outline 偏移，可能破坏网格对齐，建议用box-shadow替代
grid 子项的选择器看似简单，真正麻烦的是 DOM 层级错位、伪类计数误解、以及 hover 时无意触发 layout —— 这三处最容易在调试时花掉半天时间。
