针对 CSS 中的特定元素？

Question

大家早上好，

我无法使用共享相同 div 父级的 a[aria-expanded=true] 来定位 .fa-caret-down 或 up（在 i 和 span 内），你知道该怎么做吗？

我尝试使用选择器〜，或移动 fa-caret-up（并成功），但你在这里真的很好，所以如果你能找到解决方案，这里是一个简单的代码版本。

谢谢！

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

<div class="container-fluid d-flex justify-content-center">
    <div class="row">
    
        <div class="col-lg-4 col-md-6 col-12 pb-5">
            <h4 class="text-center">eCampus</h4>
            
            <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&eacute; 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>
            
            <div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements de l'Universit&eacute; Paris-Saclay">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.universite-paris-saclay.fr" alt="Site internet de l'Universit&eacute; Paris-Saclay" target="_blank">UPSaclay</a></li>   
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.univ-evry.fr" alt="Site internet de l'Université d'Évry Val d’Essonne" target="_blank">UEVE</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.uvsq.fr" alt="Site internet de l'université de Versailles-Saint-Quentin-en-Yvelines" target="_blank">UVSQ</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.centralesupelec.fr" alt="Site internet de Centrale Sup&eacute;lec" target="_blank">Centrale Sup&eacute;le</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://ens-paris-saclay.fr" alt="Site internet de l'École Normale Supérieure" target="_blank">École Normale Supérieure</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.institutoptique.fr" alt="Site internet de l'Institut d'Optique Graduate School" target="_blank">Institut d'Optique</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="http://www2.agroparistech.fr" alt="Site internet de AgroParisTech" target="_blank">AgroParisTech</a></li>
                </ul>
            </div>
            
            <div class="d-flex justify-content-between align-items-center">
                <a href="#" class="text-nowrap pr-5" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
                    <span><i class="fa fa-chevron-right pr-2"></i>Institut Polytechnique de Paris</span>
                </a>
                <span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
            </div>
            
            <div id="footer_ipp" class="collapse pl-3" aria-labelledby="Établissements de l'Institut Polytechnique de Paris">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.ensta-paris.fr" alt="Site internet de ENSTA Paris" target="_blank">ENSTA</a></li>   
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="http://www-instn.cea.fr" alt="Site internet de l'Institut national des sciences et techniques nucléaires" target="_blank">INSTN</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-paris.fr" alt="Site internet de Télécom Paris" target="_blank">Télécom Paris</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="https://www.telecom-evolution.fr" alt="Site internet de T&eacute;l&eacute;com Evolution" target="_blank">T&eacute;l&eacute;com Evolution</a></li>
                </ul>
            </div>
            
            <br />
            <i class="fa fa-chevron-right pr-2"></i><a href="https://www.universite-paris-saclay.fr/collaborations/international/loffre-de-lalliance-eugloh-pour-les-etudiants" target="_blank">Alliance EUGLOH pour les &eacute;tudiants</a>
        </div>
        
        
        <div class="col-lg-4 col-md-6 col-12 pb-4">
            <h4 class="text-center">Aide et Informations l&eacute;gales</h4>
            <ul class="list-unstyled">
                <li><i class="fa fa-chevron-right pr-2"></i><a href="https://multiweb2.univ-evry.fr/SupportEcampus/">Probl&egrave;mes de connexion</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Aide et accessibilit&eacute;</a></li>
                <li>&nbsp;<li>
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Conditions g&eacute;n&eacute;rales d'utilisation</a></li>    
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Cr&eacute;dits</a></li>  
                <li><i class="fa fa-chevron-right pr-2"></i><a href="">Mentions l&eacute;gales</a></li> 
                <li><i class="fa fa-chevron-right pr-2"></i><a href="/admin/tool/dataprivacy/summary.php">Politique de confidentialit&eacute;</a></li>  
                <li>&nbsp;<li>
                <li><i class="fa fa-chevron-right pr-2"></i><a href="https://www.openlms.net/open-lms-mobile-app/?utm_source=9rgh0ncHTl1wJMQhZbEpm5EfZrdmgA1Dmoodle20gm.mrooms.net&utm_campaign=mobilelink_admin" target="_blank">Obtenir l'app mobile</a></li>
            </ul>
        </div>
        
        <div class="col-lg-4 col-md-12 text-center">
            <h4 class="text-center">Suivez-nous</h4>
            
            <a href="https://www.facebook.com/UParisSaclay" alt="Facebook de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
            <a href="https://twitter.com/UnivParisSaclay" alt="Twitter de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
            <a href="https://www.linkedin.com/school/universit%C3%A9-paris-saclay/" alt="LinkedIn de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
            <a href="https://www.instagram.com/universite_paris_saclay/" alt="Instagram de l'Universit&eacute; Paris-Saclay" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
        </div>
        
    </div>
</div>

Answer 1

如果你想制作插入符号上下动画，你可以使用 little JS

const caret = document.querySelector('.caret');

caret.addEventListener('click', (e) => {
  e.preventDefault();
  caret.classList.toggle('collapsed');

  if (caret.classList.contains('collapsed')) {
    caret.setAttribute("aria-expanded", "true");
  } else {
    caret.setAttribute("aria-expanded", "false");
  }

  console.log(caret.getAttribute('aria-expanded'))
});

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.caret {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 0.25rem;
  border: 1px solid #e5e5e5;
}

.caret svg {
  width: 64px;
  height: 64px;
  transition: transform 250ms ease;
}

.caret.collapsed svg {
  transform: rotate(180deg);
}

<a href="#" class="caret" aria-expanded="false">
  <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="m11.998 17 7-8h-14z"></path>
    </svg>
</a>

Answer 2

如果您想使用通用兄弟选择器 (~)，您必须先选择兄弟，然后再选择 i 标签。例如：

a[aria-expanded="true"] ~ span .fa-caret-up {...}

工作示例：

a[aria-expanded=true] ~ span .fa-caret-up {
  display: none;
}

a[aria-expanded=false] ~ span .fa-caret-down {
  display: none;
}

<script src="https://kit.fontawesome.com/79efab5353.js" crossorigin="anonymous"></script>

<div class="container-fluid d-flex justify-content-center">
  <div class="row">

    <div class="col-lg-4 col-md-6 col-12 pb-5">
      <h4 class="text-center">Moodle</h4>

      <div class="d-flex justify-content-between align-items-center mr-5">
        <a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
          <span class="flex-grow-1"><i class="fa fa-chevron-right pr-2"></i>Uni</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>

      <div id="footer_ups" class="collapse pl-3" aria-labelledby="Établissements">
        <ul class="list-unstyled">
          <li><i class="fa fa-angle-right pr-2"></i> <a href="https://" alt="Site internet" target="_blank">Website</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>