本文介绍一种纯 css 方案，利用 :has() 伪类结合 nth-child 和 nth-last-child 选择器，精准匹配最后一行不足指定数量（如少于 7 项）的 grid 容器，并为其应用差异化样式。无需 javascript，兼容现代浏览器。
本文介绍一种纯 css 方案，利用 :has() 伪类结合 nth-child 和 nth-last-child 选择器，精准匹配最后一行不足指定数量（如少于 7 项）的 grid 容器，并为其应用差异化样式。无需 javascript，兼容现代浏览器。
在响应式或动态内容场景中，Grid 容器的项目总数往往不可预知，但有时需根据最后一行实际填充项数调整容器样式（例如添加边框、背景色或间距）。CSS 原生不提供“最后一行项数”直接查询机制，但可通过逻辑推导实现：当且仅当最后一行 ≤ b 项时，末尾 b 个子元素中必有且仅有一个是其所在行的首项（即满足 :nth-child(an+1)）。
设每行固定列数为 a（本例中为 10），目标为检测最后一行 ≤ b 项（本例要求 < 7，即 ≤ 6），则关键选择器为：
.container:has(.item:nth-last-child(-n+6):nth-child(10n+1)) {
border: 2px solid #e74c3c;
background-color: #fdf2f2;
}✅ 原理说明：
- .item:nth-last-child(-n+6) 匹配倒数第 1 至第 6 个 .item；
- .item:nth-child(10n+1) 匹配每行第一个元素（第 1、11、21… 个）；
- :has(...) 表示只要任一倒数 6 项同时是某行首项，即说明最后一行 ≤ 6 项（否则该行首项必然超出倒数 6 范围）。
? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- :has() 目前在 Chrome 105+、Firefox 119+、Safari 15.4+ 中稳定支持，旧版浏览器需降级处理（如 JS 检测 + class 切换）；
- a（列数）和 b（阈值）需严格对应：若需检测“最后一行 ≤ 3 项”，则用 :nth-last-child(-n+3):nth-child(10n+1)；
- 此方法依赖 Grid 的显式列布局（grid-template-columns: repeat(10, 1fr)），不适用于 auto-fit / auto-fill 动态列数场景；
- 若项目存在跨列（grid-column: span 2 等），会破坏行首定位逻辑，需确保所有项目均为单列跨度。
? 扩展用法：
- 匹配最后一行 > 6 项（即 ≥ 7 项）：
.container:not(:has(.item:nth-last-child(-n+6):nth-child(10n+1))) { border: 2px solid #27ae60; } - 通用公式（替换 a 和 b 即可复用）：
.grid-container:has(.item:nth-last-child(-n+b):nth-child(an+1)) { /* 样式 */ }
通过这一技巧，开发者可在纯 CSS 层面实现基于 Grid 布局语义的精细化样式控制，显著提升动态列表的视觉一致性与用户体验。
