如何使用CSS选择器定位与a[aria-expanded=true]同父级的.fa-caret-down/up图标？

嘿，我懂你的困扰——你想借助同一父容器里<a>标签的aria-expanded状态，来切换旁边<span>里的上下箭头图标，但原来的CSS选择器因为层级关系不对，根本选不到目标图标对吧？咱们来一步步解决它。

问题根源 #

你原来的CSS写的是：

a[aria-expanded="true"] .fa-caret-up { display: none; }
a[aria-expanded="false"] .fa-caret-down { display: none; }

这个选择器是在找<a>标签内部的.fa-caret-up/.fa-caret-down元素，但实际上图标是在和<a>同级的<span>标签里，所以完全匹配不到目标，自然没效果。

解决方案：使用CSS兄弟选择器 #

咱们可以用CSS的通用兄弟选择器（~）来选中与<a>同级的<span>，再定位里面的图标。修改后的CSS如下：

/* 当a标签展开状态为true时，隐藏同级span里的向上箭头 */
a[aria-expanded="true"] ~ span .fa-caret-up {
  display: none;
}
/* 当a标签展开状态为false时，隐藏同级span里的向下箭头 */
a[aria-expanded="false"] ~ span .fa-caret-down {
  display: none;
}

/* 针对第二个区块的单个图标（可选，实现图标切换） */
.footer_ipp_glyph.fa-caret-up {
  display: none;
}
a[aria-expanded="true"] ~ span .footer_ipp_glyph.fa-caret-down {
  display: none;
}
a[aria-expanded="true"] ~ span .footer_ipp_glyph.fa-caret-up {
  display: inline-block;
}

选择器说明 #

• a[aria-expanded="true"] ~ span：选中所有和aria-expanded="true"的<a>标签同级的<span>元素（不管它们之间有没有其他元素）
• 如果你的<a>和<span>是紧挨着的，也可以用相邻兄弟选择器（+），比如a[aria-expanded="true"] + span，这样更精准，但~兼容性更好也更灵活。

适配你的结构验证 #

对应你代码里的第一个区块：

<div class="d-flex justify-content-between align-items-center">
  <a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
    <span class="flex-grow-1 mr-5"><i class="fa fa-chevron-right pr-2"></i>Université Paris-Saclay</span>
  </a>
  <span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></span>
</div>

修改后的CSS会完美匹配这个结构：当<a>的aria-expanded变为true时，同级<span>里的.fa-caret-up会被隐藏；反之.fa-caret-down隐藏，正好实现展开/收起时的图标切换。

对于第二个只有单个向下箭头的区块，你可以选择添加一个向上箭头图标，用上面的第二个CSS逻辑来切换显示，完全不用改动现有DOM结构。

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