CSS中.show与.box.show选择器的区别及滚动动画异常原因

• 匹配范围不同
  • 单类选择器（如.show）：选中页面所有携带show类的元素，不要求元素附带其他类名，规则会作用于全页面所有带该类的元素。
  • 多类组合选择器（如.box.show）：仅选中同时携带box和show两个类名的元素，规则生效范围被缩小到满足所有类匹配的元素交集。
• CSS权重不同
  浏览器计算同一样式属性的生效规则时，会优先采用选择器权重更高的规则，权重相同时才会按代码书写顺序决定：
  • 单类选择器.show的权重为 (0,1,0)
  • 双类组合选择器.box.show的权重为 (0,2,0)
  • 带伪类的选择器.box:nth-of-type(even)的权重为 (0,2,0)（类选择器+伪类选择器，各计1个类级权重单位）

代码中两组和位移相关的规则存在权重差，直接导致了替换选择器后的异常：

1. 原正常版本的逻辑
   .box.show 和 .box:nth-of-type(even) 权重完全相等。由于.box.show书写在.box:nth-of-type(even)之后，权重相同时后写的规则会覆盖先写的规则：偶数位box一旦被JS加上show类，就会把初始状态的transform: translateX(-4000%)覆盖为transform: translateX(0)，顺利完成从左侧滑入居中的动画。
2. 替换为单类选择器后的失效逻辑
   把.box.show改为仅使用.show后，该选择器的权重仅为(0,1,0)，低于.box:nth-of-type(even)的(0,2,0)权重。按照CSS层叠规则，高权重规则会完全覆盖低权重的规则——哪怕偶数位box加上了show类，它的位移值依然被更高优先级的偶数定位规则锁定在屏幕左侧外的-4000%位置，永远不会切换到居中的0位移，因此看不到从左侧滑入的效果。

内容的提问来源于stack exchange，提问作者amir mohammad salimzadeh