基于类选择器设置.dropdown-content:after外边距的问题求助

我明白你的需求了——要根据.dropdown是否带有.is-right类，给.dropdown-content:after设置不同的外边距值。看你现在的SASS代码，问题出在两种状态的样式没有正确区分，导致属性相互覆盖了。咱们来调整一下：

修正后的SASS代码 #

.dropdown {
  // 先定义通用的箭头样式（两种状态都共用的属性）
  .dropdown-content {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 35%;
      width: 0;
      z-index: 1;
      height: 0;
      border-bottom: solid 15px #FFF;
      border-left: solid 15px transparent;
      border-right: solid 15px transparent;
      // 默认状态（没有.is-right类时）的外边距
      margin-top: -11px;
      margin-left: 0; // 初始化左边距，避免干扰
    }
  }

  // 当dropdown带有.is-right类时，覆盖对应的外边距
  &.is-right {
    .dropdown-content {
      &:after {
        margin-left: 60px;
        margin-top: 0; // 重置上边距，只保留左边距的设置
      }
    }
  }
}

代码解释 #

1. 通用样式抽离：把两种状态下都需要的基础样式（比如content、position、边框样式）放在默认的.dropdown .dropdown-content:after里，避免重复代码。
2. 默认状态设置：在没有.is-right类时，设置margin-top: -11px，同时初始化margin-left: 0，防止后续样式冲突。
3. is-right状态覆盖：当.dropdown带有.is-right类时，专门覆盖margin-left: 60px，并把margin-top重置为0，这样就只会应用左边距的调整，不会和默认的上边距冲突。

这样调整后，你的两种场景就能正确生效了：

• 当是<div class="dropdown">时，箭头会应用margin-top: -11px
• 当是<div class="dropdown is-right">时，箭头会应用margin-left: 60px

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