HTML5不提供布局能力，真正起作用的是CSS伪类选择器配合Flexbox、Grid等布局机制实现动态样式控制；伪类仅匹配元素并应用样式，不能替代display/flex/grid等基础布局声明。
HTML5 本身不提供布局能力，所谓“伪类布局”是误解；真正起作用的是 CSS 中的伪类选择器（如 :hover、:nth-child()）配合 CSS 布局机制（Flexbox、Grid 等）实现动态、条件性样式控制。
伪类选择器不能替代 display / flex / grid
很多人试图用 :first-of-type 或 :last-child 直接“撑开容器”或“设置宽高”，这是无效的。伪类只匹配元素并应用样式，不改变文档流或布局模型。
- 伪类选择器必须配合已生效的布局声明（如
display: flex）才能影响视觉排列 -
:nth-child(2n)可以给偶数项加margin-left: auto实现右对齐，但前提是父容器已是display: flex - 单独写
div:nth-child(1) { grid-column: 2 }不会触发 Grid 布局——父元素必须先设display: grid并定义grid-template-columns
常用伪类在 Flex/Grid 布局中的真实用途
它们主要解决“按位置/状态差异化控制”，不是定义基础结构。
-
:nth-child(n+4)：从第 4 个子项开始统一设置align-self: flex-end，让后几项底部对齐 -
:not(:last-child)：在 Flex 容器中给非末尾项加margin-right: 1rem，避免最后一项多出空隙 -
:is(:hover, :focus-within)：配合transform: translateY(-2px)让 Grid 项悬停时轻微上浮，增强交互反馈
容易踩的坑：伪类优先级与 DOM 依赖
伪类样式是否生效，高度依赖 HTML 结构和层叠顺序，稍有不慎就失效。
立即学习“前端免费学习笔记（深入）”；
-
:nth-of-type()只计同类型标签（如div），若中间插了p或注释节点，序号会跳变 -
:focus-visible在无键盘操作时可能不触发，别用它做核心布局切换（比如靠它显示侧边栏） - 伪类权重为 0-1-0（如
.card:hover是 0-2-0），低于内联style和!important，调试时注意 DevTools 中被覆盖的样式线
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gallery > article:nth-child(odd) {
align-self: start;
}
.gallery > article:nth-child(even) {
align-self: end;
}
.gallery > article:hover {
z-index: 1;
transform: scale(1.03);
}
伪类选择器的价值不在“布局”，而在“精准响应”；真正要搭结构，老老实实写 display: grid 或 display: flex，再用伪类微调细节。结构和状态必须分开想，混在一起最容易卡住。
