手风琴样式箭头在aria-expanded为true时无法下移，求排查

你的HTML代码：

<div class="accordian-wrapper">
<div class="accordion-wrapper__title">
<div aria-expanded=true">
<div class="accordion-wrapper__title__icon-label">
<i class="accordion-wrapper__arrow"/>
</div>
</div>
</div>
</div>

你尝试的CSS代码：

.accordion-wrapper {
  .accordion-wrapper__title {
    &[aria-expanded="true"]{
      .accordion-wrapper__arrow {
        transform: rotate(90deg);
      }
    }
  }
}

问题根源 #

• 类名不匹配：HTML最外层容器类名是accordian-wrapper（多了一个i），但CSS里用的是.accordion-wrapper，选择器链从根节点就失效了。
• 属性位置错误：aria-expanded属性加在.accordion-wrapper__title的子div上，但你的CSS是给.accordion-wrapper__title本身加属性条件，选择器路径完全不匹配DOM结构。
• 属性语法错误：HTML里的aria-expanded=true"缺少前引号，正确写法是aria-expanded="true"，语法错误会导致浏览器无法识别该属性。
• 需求与代码不符：你要实现箭头下移，但CSS写的是transform: rotate(90deg)（旋转90度），下移应该用transform: translateY(XXpx)或调整margin/padding。

修正方案 #

方案1：修正现有DOM结构的问题

先修复HTML的拼写和语法错误：

<div class="accordion-wrapper"> <!-- 修正类名拼写 -->
  <div class="accordion-wrapper__title">
    <div aria-expanded="true"> <!-- 补上属性前引号 -->
      <div class="accordion-wrapper__title__icon-label">
        <i class="accordion-wrapper__arrow"></i> <!-- 闭合i标签，避免兼容性问题 -->
      </div>
    </div>
  </div>
</div>

再调整CSS选择器路径，匹配正确的DOM层级：

.accordion-wrapper {
  .accordion-wrapper__title {
    div[aria-expanded="true"] {
      .accordion-wrapper__arrow {
        transform: translateY(5px); // 改为下移效果，数值按需调整
      }
    }
  }
}

方案2：优化DOM结构（更符合语义）

把aria-expanded直接加在.accordion-wrapper__title上，简化选择器：

<div class="accordion-wrapper">
  <div class="accordion-wrapper__title" aria-expanded="true"> <!-- 属性移到标题容器上 -->
    <div class="accordion-wrapper__title__icon-label">
      <i class="accordion-wrapper__arrow"></i>
    </div>
  </div>
</div>

对应的CSS可以沿用你原本的结构（记得修正类名拼写）：

.accordion-wrapper {
  .accordion-wrapper__title {
    &[aria-expanded="true"] {
      .accordion-wrapper__arrow {
        transform: translateY(5px);
      }
    }
  }
}

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