css transition本身不继承，但子元素未显式声明时会使用父级提供的初始值；子元素“跟着动”是因为其可动画属性变化时触发了继承来的transition声明，而非父元素直接控制。
CSS transition 本身不继承，但子元素会“捡到”父级声明的过渡规则；想让它只作用当前元素，关键不是阻止继承，而是不让子元素匹配到那条 transition 声明。
为什么子元素也会动？因为 transition 写在了父元素的默认状态里
常见错误是这样写：
.card {
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.05);
}
看起来只动 .card，但一旦子元素（比如 .card__icon）自己也改了 transform（哪怕只是加了个 class），它就会用上从父级“继承来”的 transition 值——因为 transition 属于可继承的初始值属性，子元素没显式覆盖时就沿用父级的。
- 查证方式：在 DevTools 的 Computed 面板里点开子元素，看
transition-property是不是显示为transform - 这不是 bug，是 CSS 规范行为：transition 的初始值是
all 0s ease 0s，父级设了值，子元素未重写，就拿这个值当自己的默认过渡配置 - 即使子元素没改
transform，只要它某个可过渡属性变了（比如opacity），也会触发那段transform 0.3s—— 因为transition-property: transform并不拦着其他属性变，只是不给它们过渡而已；但若你用了transition: all 0.3s，那就全中招
最稳妥的做法：用选择器把 transition 限定在目标元素自身
别依赖“继承不会发生”，直接让 transition 规则不命中子元素：
- 把
transition挪到带明确类名或属性的选择器里，例如：.card--interactive { transition: transform 0.3s; }，然后只把这个类加在真正要动的容器上 - 避免用宽泛选择器如
div、*[class]或.card *声明 transition - 如果必须用通配，至少排除子元素：
.card > * { transition: none; }—— 注意这里用的是>，确保只作用于直接子，不误杀深层后代 - 慎用
all: unset在子元素上清样式：它会干掉display、box-sizing等关键属性，容易引发布局崩溃
transition: none 不等于“没过渡”，而是“显式关掉”
给子元素单独加 transition: none 是有效且安全的，但它有前提：
- 这条规则的优先级必须 ≥ 父级传来的 transition 声明（检查 Styles 面板是否被划掉）
- 不能只写
transition: none就完事，得确保它生效范围覆盖所有可能触发过渡的子元素状态，例如：.card__icon, .card__text { transition: none; } - 如果子元素需要自己的过渡（比如图标 hover 旋转），那就不能全关，改为精准控制：
transition-property: opacity, color;，漏掉transform就不会响应父级缩放 - IE 不支持
unset，但none全浏览器兼容，放心用
真正麻烦的不是怎么写 transition，而是默认状态下它已经悄悄“签发”了一份通用通行证。最容易被忽略的，是以为只要不碰子元素的属性，它就绝对不动——其实只要父级给了过渡契约，子元素稍一变动，浏览器就按约执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
