CSS如何为同一元素的不同:hover状态分别应用过渡效果

不是层级冲突，是CSStransition属性被高权重规则覆盖了。
权重计算：.slideShowContainer:hover .fa-chevron-right选择器包含2个类选择器+1个伪类选择器，权重为0,0,3,0；而.fa-chevron-right:hover仅包含1个类选择器+1个伪类选择器，权重为0,0,2,0。前者权重更高，其内部写的transition: opacity 0.3s linear仅声明了opacity属性的过渡效果，直接覆盖了箭头默认样式里配置的transform过渡规则，导致缩放效果没有过渡动画。

不需要JS，不需要调整DOM结构，只需要把两个过渡属性统一配置，不要在容器hover的后代规则里重复写transition覆盖配置即可。
修复后的完整CSS代码如下：

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkgrey;
}

.slideShowContainer {
  display: flex;
  flex-direction: row;
  background-color: #414141;
  position: relative;
  width: 100%;
  height: 40vw;
  margin: 0 auto;
  padding: 0;
  z-index: 1;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

/* 合并左右箭头公共样式，减少冗余代码 */
.fa-chevron-right,
.fa-chevron-left {
  display: block;
  opacity: 0;
  font-size: 2.3vw;
  position: absolute;
  top: 50%;
  color: white;
  margin: 0 5%;
  z-index: 2;
  padding: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  cursor: pointer;
  transform-origin: center;
  transform: scale(1);
  /* 同时配置opacity和transform的过渡规则，分别设置对应时长 */
  transition: opacity 0.3s linear, transform 1s linear;
}

.fa-chevron-right {
  right: 0;
}

.fa-chevron-left {
  left: 0;
}

/* 箭头hover缩放 */
.fa-chevron-right:hover,
.fa-chevron-left:hover {
  transform: scale(1.2);
}

/* 容器hover时箭头淡入 */
.slideShowContainer:hover .fa-chevron-right,
.slideShowContainer:hover .fa-chevron-left {
  opacity: 1;
  /* 移除此处重复的transition配置，避免覆盖统一的过渡规则 */
}

配套DOM结构无需调整，确保图标库正常加载即可，替换上述CSS后可直接实现预期效果：

• 鼠标移入轮播区域时，两侧箭头以0.3秒线性过渡淡入
• 鼠标悬停在箭头图标上时，图标以1秒线性过渡平滑放大到1.2倍
• 两个动效完全独立互不干扰，无任何JS逻辑

内容的提问来源于stack exchange，提问作者Andi