怎样用CSS伪类:nth-child实现自适应九宫格网格布局？-css教程-PHP中文网

九宫格需用:nth-child()与:nth-last-child()组合动态控制图片布局：1张铺满、2–3张横排、4张两行、5–9张三列，容器需纯净或包裹隔离，配合aspect-ratio实现正方形裁剪，并用css计数器处理超9张的“+n”提示。

怎样用css伪类:nth-child实现自适应九宫格网格布局？

用 `:nth-child()` 控制每行图片数量和宽度

九宫格不是固定 3×3，而是根据图片总数动态排布：1 张铺满、2–3 张横排、4 张分两行、5–9 张回归三列网格。关键在于用 :nth-child() 精准识别“当前是第几张”和“总共有几张”，再配合 :nth-last-child() 反向定位末尾元素。

常见错误是只写 :nth-child(3n) 就以为能控制列数——它只管位置，不管总数。真正起作用的是组合选择器，比如：.item:nth-child(1):nth-last-child(3) 表示“这张是第一张，且总共有 3 张”，此时才给它设 width: 32%。

2–3 张：用 .item:nth-child(1):nth-last-child(2) 和 .item:nth-child(1):nth-last-child(3) 匹配，统一设 width: 32%
4 张：用 .item:nth-child(1):nth-last-child(4) ~ .item:nth-child(4):nth-last-child(1)，设 width: 49%（留出 margin）
5–9 张：用 .item:nth-child(-n+3) 或更稳妥的 .item:nth-child(1):nth-last-child(n + 5) 覆盖前 3 个，再用 ~ img 向后影响全部，统一设 width: 32%

避免 `:nth-child()` 与 DOM 结构强耦合

如果图片容器里混入了其他元素（比如描述文字 <p></p>、占位 <span></span>），:nth-child() 就会失效——因为它数的是所有子节点，不是仅 <img>。微信朋友圈那种纯图片流结构才能直接用；实际项目中更稳的方式是把每张图包进独立容器，比如：

<div class="grid">
  <div class="item">@@##@@</div>
  <div class="item">@@##@@</div>
</div>

然后对 .item 应用 :nth-child()，这样语义清晰、容错性强。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别对 <img src="..."> 直接写 :nth-child()，除非你 100% 确保父容器只有 <img src="...">
如果要用 <ul><li></ul> 结构，确保 <li> 是唯一子元素，否则 :nth-child(2) 可能匹配到注释或空文本节点
移动端需注意 iOS Safari 对复杂 :nth-child() 组合的支持较弱，建议用 grid 作为降级方案

用 `:nth-child()` 配合 `aspect-ratio` 做正方形裁剪

朋友圈九宫格要求图片缩略图是正方形，但原始图宽高比各异。单纯设 width 和 height: auto 会拉伸变形；用 object-fit: cover 又需要绝对定位容器。更轻量的解法是：给每个 .item 设 aspect-ratio: 1，再让 <img> 填满。

这时候 :nth-child() 的作用就变成控制容器尺寸而非图片本身。例如：

当只有 1 张时：.item:nth-child(1):nth-last-child(1) { width: 100%; aspect-ratio: 1; }
当有 2–3 张时：.item:nth-child(1):nth-last-child(2), .item:nth-child(1):nth-last-child(3) { width: 32%; aspect-ratio: 1; }
记得加 overflow: hidden 到 .item，否则 object-fit: cover 失效

隐藏超出 9 张的图片并显示“+N”提示

超过 9 张不全展示，是九宫格交互的常识。用 :nth-child(9)~.item 选中第 10 个及之后所有项，设 visibility: hidden（不能用 display: none，否则破坏 CSS 计数器）。

“+N”提示靠 CSS 计数器实现：counter-reset 初始化，counter-increment 在隐藏项上递增，最后用 ::after 输出数字。重点是：必须把 counter-increment 放在 :nth-child(9)~.item 规则里，而不是全局 .item 上，否则计的是总数而非超出数。

超出数 = 总数 − 9，所以只需从第 10 项开始计数：.item:nth-child(9)~.item { counter-increment: overflow; }
提示文案放在最后一张可见图右下角：.item:nth-child(9)~.item:last-child::after
注意 Safari 旧版本不支持 counter-increment 在伪类中使用，需加 @supports 检测

实际排版逻辑很细，尤其是 :nth-child() 和 :nth-last-child() 的组合顺序、括号嵌套、以及是否带空格，稍错一个字符就会整组失效。与其硬记公式，不如把不同数量的 HTML 样例写出来，用浏览器开发者工具逐条试选中效果——这才是最省时间的调试方式。