<p>:nth-of-type 本身不触发动画，仅用于元素匹配；真正实现序列动画需结合 animation-delay 与 calc((n - 1) * 0.15s) 动态生成递增延迟，现代浏览器支持，IE 不兼容。</p>
不能直接用 :nth-of-type 触发动画入场，它只是选择器，不产生时间轴或触发行为；真正起作用的是结合 CSS 动画的 animation-delay 计算式，靠序号生成递增延迟。
为什么 :nth-of-type 本身不带动画效果
:nth-of-type 只负责匹配元素，比如 li:nth-of-type(3) 找到第三个 li，但它不会自动加动画、也不会“等前两个动完再动”。动画是否播放、何时播放，完全取决于你是否给该元素设置了 animation 属性，以及是否用了 animation-delay 控制时序。
- 常见错误：只写
li:nth-of-type(n) { animation: fade-in 0.3s; }→ 所有匹配项同时播放，毫无序列感 - 真正需要的是：让第 1 个延迟 0s，第 2 个延迟 0.2s，第 3 个延迟 0.4s……形成 stagger 效果
- 关键不是“选中”，而是“按序号生成不同 delay 值”
用 calc() + :nth-of-type(n) 算出逐项延迟
现代浏览器（Chrome 84+、Firefox 75+、Safari 15.4+）支持在 animation-delay 中使用 calc()，配合 :nth-of-type(n) 的计数变量 n，就能动态生成延迟值。
- 写法示例：
li:nth-of-type(n) { animation-delay: calc((n - 1) * 0.15s); } - 解释：
n是当前匹配的序号（从 1 开始），(n - 1)保证第一个元素延迟为 0s，第二个为 0.15s，第三个为 0.3s…… - 注意：
n在calc()中是纯数字，不能写成var(--n)或其他变量形式；也不支持odd/even关键字参与计算 - 兼容性提醒：IE 完全不支持，旧版 Safari（calc() 在 animation-delay 中的支持不稳定，生产环境建议加降级（如统一延迟或 JS 补充）
必须搭配的动画定义与结构约束
仅靠 :nth-of-type + animation-delay 不足以实现“入场”，你还得确保动画本身是从不可见→可见的过渡，并且元素初始状态不破坏布局流。
立即学习“前端免费学习笔记（深入）”；
- 基础动画定义要包含起始透明度/位移：
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } - 元素需有初始隐藏态（否则会闪一下）：
li { opacity: 0; transform: translateY(10px); }，再用animation覆盖 - 父容器不能设
overflow: hidden且裁切了初始位移区域，否则动画第一帧可能被截断 - 如果列表里混有非
li元素（比如注释、div插入），:nth-of-type仍只数li，这点比:nth-child更可靠——但前提是你要的“序列”确实是按li类型排的
容易被忽略的边界情况
实际项目中，最常栽跟头的地方不在语法，而在 DOM 结构和渲染时机。
-
:nth-of-type(1)匹配不到？检查父元素下第一个同类型元素是否被display: none或visibility: hidden隐藏——伪类选择器仍会匹配它，但动画可能因不可见而无感 - 动画只播一次就停？确认没漏写
animation-fill-mode: forwards，否则动画结束后元素会恢复初始opacity和transform - 滚动加载新
li时，新增项没动画？:nth-of-type是静态匹配，新增元素需重新触发样式计算，通常需 JS 强制重排（如el.style.animation = 'none'; setTimeout(() => el.style.animation = ...)）或改用 JS 驱动的 stagger 库 - 服务端渲染（SSR）页面首屏直出时，CSS 动画可能在 DOM 就绪前就已开始——此时应配合
body:not(.js-ready) .list li { animation: none; }，JS 加载后再加 class 解锁
