用 grid-area 或 grid-row + :first-child 可控制首个网格项跨行，但需确保其为父容器首个子元素且无注释、空文本或包裹层干扰；失效主因是 dom 顺序与视觉顺序不一致、order 属性不影响伪类、额外 dom 层导致目标非首子元素；:first-of-type 更稳妥，且需注意 grid-auto-rows 或 grid-template-rows 的隐式/显式行定义。
直接说结论：用 grid-area 或 grid-row + :first-child 即可控制第一个网格项跨行，但必须确保它确实是父容器的第一个子元素，且未被其他非目标元素（如注释、空文本、div 包裹层）干扰。
为什么 li:first-child 在 Grid 中有时不生效
Grid 容器里的 :first-child 仍按 DOM 顺序匹配，不是视觉顺序。常见失效原因包括：
- 父容器开头有注释节点或空格文本节点（虽然现代浏览器大多忽略，但某些 SSR 渲染或模板引擎会保留）
- 第一个子元素其实是
div或section，而你想选的article是第二个——这时article:first-child永远不会命中 - 用了
order属性调整了显示顺序，但伪类不认这个，只看源码位置 - Grid 项被包裹在额外的 DOM 层中（比如 Vue/React 的
<template></template>或 Fragment），导致真实第一个子元素不是你写的那个组件
:first-child 配合 grid-row 实现跨行的写法
假设你有一个 display: grid 的容器，每个直接子项是 article，想让第一个 article 占两行：
article:first-child {
grid-row: span 2;
}
关键点：
-
grid-row: span 2表示从当前行开始向下占 2 行，无需指定起始行号 - 如果需要精确控制起止（比如从第 2 行开始占 2 行），写成
grid-row: 2 / 4 - 若同时设了
grid-column，注意避免与其他项的列范围冲突，尤其当后续项用了grid-column: 1 / -1时可能重叠 - 不要依赖
nth-child(1)替代:first-child——两者在此场景效果一致，但语义和可读性上:first-child更直白
当结构不可控时，用 :first-of-type 更稳妥
如果你无法保证第一个子元素就是目标类型（例如 Grid 容器里可能混有 header、aside 或插槽占位符），:first-child 就会失效。此时换用：
article:first-of-type {
grid-row: span 2;
}
区别在于：
-
:first-child要求该article必须是父元素的第一个子节点 -
:first-of-type只要求它是同级中第一个article，不管前面有没有h2或div - 二者兼容性无差别，
:first-of-type在 IE9+ 也完全支持
真正容易被忽略的是：Grid 的 grid-row 跨行行为依赖于显式定义的行轨道（grid-template-rows）或隐式生成的行高。如果容器没设 grid-auto-rows，又没定义足够多的行，跨行可能被截断或撑开整个容器——这不是选择器问题，而是 Grid 布局本身的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
