iOS Safari下多类绑定的::after伪元素样式无法覆盖问题咨询

问题原因 #

这是Safari浏览器的已知样式层叠bug：当同一个元素的多个类对应了相同伪元素（比如::after、::before）的样式，且两个选择器的CSS特异性完全相同时，部分版本的Safari不会遵循标准CSS层叠规则（同优先级下后声明的样式覆盖先声明的样式），反而会错误地优先应用先定义的类对应的伪元素样式，导致后声明的class2样式无法覆盖class1。

可行解决方案 #

• 提高需要优先生效的选择器特异性
  最稳妥的方案是调高.class2::after的选择器权重，让它天然比.class1::after优先级更高，不需要依赖层叠顺序，示例代码：

  /* 方案1：指定同时携带两个类时的伪元素样式，权重更高，兼容性最好 */
  .class1.class2::after {
    content:"2rem after";
    font-size:2rem;
  }
  /* 方案2：结合标签名提高权重，适配不需要同时判断两个类的场景 */
  a.class2::after {
    content:"2rem after";
    font-size:2rem;
  }
  

• 强制指定样式优先级
  如果不方便修改选择器结构，可以在需要优先生效的属性后加!important强制覆盖，仅推荐临时应急使用：

  .class2::after{
    content:"2rem after" !important;
    font-size:2rem !important;
  }
  

• 针对Safari触发样式重计算
  部分老版本Safari存在伪元素样式缓存问题，你可以将.class2::after的声明放在所有.class1相关样式的最后，同时针对Safari环境用极小定时器触发元素类名重赋值，强制浏览器重新计算样式：

  // 仅针对Safari的兼容代码
  if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
    const targetEl = document.querySelector('.class1.class2')
    const originClass = targetEl.className
    targetEl.className = ''
    setTimeout(() => targetEl.className = originClass, 0)
  }
  

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