Css 如何同时转换多个元素上的属性

我一直在尝试同时转换多个元素的背景色（和一些其他）属性

为了实现这一点（因为有许多类型的目标元素分布在整个DOM中），我一直在尝试用类似这样的方法应用转换

。暗模式转换*{
过渡属性：背景色、边框色、颜色；
过渡时间：0.5s；
}

计划是在转换前将

暗模式转换

类添加到顶层，并在转换后将其删除

这种方法适用于Firefox（所有元素按预期同步转换），但在Safari和Chrome中，一些转换似乎在等待其他转换完成后才触发（这说明了问题）

以前有人遇到过这样的问题吗？有没有其他方法是我遗漏的？任何意见都将不胜感激

---

我知道所有的目标选择器都可以这样列出

。暗模式转换。某些类，
.暗模式转换。其他类别，
.暗模式转换。又是一个类{
过渡属性：背景色、边框色、颜色；
过渡时间：0.5s；
}

但我希望避免对每个组合进行硬编码

---

谢谢

代码中有两个主要问题

字体大小在相对单位（em）中减少

Div1、Div2和Div3是彼此的孩子和孙子

所以问题是，每个div的字体大小都会随着父div的不同而变化

可能的解决办法。 1.如果需要div之间的父子关系，请将字体大小unite更改为px

如果没有问题，将div彼此分离，并逐个添加为同级。然后您可以使用相对单位来表示字体大小

注意：对于同时触发转换的大量项目，不要全部使用转换属性。这会造成性能问题

如果要在大量元素上添加转换，也要尽量避免使用*选择器。 定义要更改的特定属性。它还可以提高性能

选项一-分离div

.large.animate{
字号：3em；
}
.制作动画{
过渡：字体大小0.5s；
}
身体{
字号：1em；
字体系列：无衬线；
}
钮扣{
边缘底部：25px；
}

切换
一个
两个
三
四