纯CSS轮播关键在scroll-snap实现精准停靠：需设scroll-snap-type:x mandatory、每项scroll-snap-align:center、容器overflow-x:auto+scroll-behavior:smooth，:target仅触发锚点定位。
用 :target 配合 scroll-snap-align 实现无JS轮播
纯CSS轮播能跑起来，关键不在“怎么动”，而在“怎么停”——靠浏览器原生滚动吸附能力，不是靠动画模拟。必须启用 scroll-snap-type，且容器需设 overflow-x: auto 和 scroll-behavior: smooth（否则跳转生硬）。:target 只负责触发锚点定位，真正对齐靠的是 scroll-snap-align: center 给每个轮播项设的吸附点。
常见错误是只写 :target 样式却忘了 scroll-snap，结果点击锚点后页面滚动了，但停不准、不居中、甚至滑过头。
-
scroll-snap-type必须写在横向滚动容器上，值为x mandatory（proximity容易失焦） - 每个轮播项（如
.slide）必须设scroll-snap-align: center，不能只靠text-align或margin - 容器高度要固定，否则
scroll-snap在部分 Safari 中失效 - 锚点链接 href 必须指向 id，例如
#slide-2，对应<div id="slide-2">
为什么不用 transform + @keyframes 做自动轮播
因为那是“假轮播”：它不改变 URL，无法前进/后退，用户刷新就回到第一张，也不支持手滑切换，更没法被搜索引擎或分享链接识别。真轮播的核心是可寻址（addressable），也就是每张图对应一个唯一 URL 片段（#slide-3）。自动播放只是锦上添花，可以加，但不能替代锚点结构。
若强行用 @keyframes 模拟，会立刻遇到三个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 无法响应用户手动拖拽滚动，
animation会直接打断或冲突 - 焦点管理失控，键盘
Tab无法落到当前可见 slide - 无障碍支持差，
aria-live很难准确播报变化，而:target天然触发focus和语义更新
overflow-x: auto 容器里图片错位或换行怎么办
横向滚动容器里子元素默认是 inline 或 block，容易因空格、换行符或默认 white-space 折叠导致间隙，让 scroll-snap 对不齐。最稳解法是让所有 slide 成为 flex 项目，并禁用换行。
`.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* iOS 滚动顺滑 */
}
<p>.carousel .slide {
flex: 0 0 100%;
scroll-snap-align: center;
min-width: 0; /<em> 防止图片撑宽破坏 snap </em>/
}`注意：flex: 0 0 100% 比 width: 100% 更可靠，避免子元素内容溢出影响宽度计算；min-width: 0 是为了防止内部图片或文字强制撑宽容器。
Safari 和旧版 Chrome 的 scroll-snap 兼容性坑
iOS 14+ 和 Chrome 69+ 支持良好，但 Safari 13.1–14.0 有 bug：如果容器用了 padding，scroll-snap-align: center 会偏移；Chrome 68 及更早版本压根不支持 mandatory，只能降级为 proximity，但吸附不可靠。
务实做法是加一层检测和回退：
- 用
@supports (scroll-snap-type: x mandatory)包裹核心样式 - 不支持时，用
scroll-margin-inline: 50%模拟居中（需配合scroll-snap-align: start） - 绝对不要依赖
scroll-snap-stop: always，它兼容性更差，且多数场景不需要 - 测试时务必真机连 Safari，模拟器可能掩盖
scroll-behavior: smooth失效问题
锚点轮播的复杂点从来不在“怎么写”，而在于“怎么让它在各种滚动条件下都停得准、跳得稳、退得回”。多一个空格、少一行 -webkit-overflow-scrolling、或者忘了 min-width: 0，都可能导致整个轮播在某个机型上完全错位。
