CSS 菜单，如何 select 父级

Question

我在导航菜单中有三个项目

<nav>
    <ul class="menu-topnav menu">
        <li class="menu__item menu__item--first-lvl active-trail active">
            <a href="/le-reseau-pikard" class="topnav-3-pikard" data-drupal-link-system-path="node/12">Le Réseau Pikard</a>
        </li>
        <li class="menu__item menu__item--first-lvl">
            <a href="/accueil" class="topnav-3-pikard is-active" data-drupal-link-system-path="node/17">Pikard</a>
        </li>
        <li class="menu__item menu__item--first-lvl">
            <a href="https://isoprotek.fr" class="topnav-3-isoprotek">Isoprotek</a>
        </li>
    </ul>
</nav>

我希望第二个 <a> is-active CSS class 在第一个父 li 有 active class 时禁用.我该怎么做？

Answer 1

针对您的问题和共享的代码示例，下面应该使用 + 下一个兄弟选择器来工作。

li.active + li > a.is-active {
  pointer-events: none;
  opacity: 0.3;
}

const btn = document.querySelector('button');
const firstLi = document.querySelector('.menu-topnav > li:first-of-type');

btn.addEventListener('click', ()=>{
  let activeClass = firstLi.classList.contains('active') ? firstLi.classList.remove('active') : firstLi.classList.add('active');
  
});

li.active + li > a.is-active {
  pointer-events: none;
  opacity: 0.3;
}

<nav>
    <ul class="menu-topnav menu">
        <li class="menu__item menu__item--first-lvl active-trail active">
            <a href="/le-reseau-pikard" class="topnav-3-pikard" data-drupal-link-system-path="node/12">Le Réseau Pikard</a>
        </li>
        <li class="menu__item menu__item--first-lvl">
            <a href="/accueil" class="topnav-3-pikard is-active" data-drupal-link-system-path="node/17">Pikard</a>
        </li>
        <li class="menu__item menu__item--first-lvl">
            <a href="https://isoprotek.fr" class="topnav-3-isoprotek">Isoprotek</a>
        </li>
    </ul>
</nav>
<button>Toggle active class from first LI</button>

CSS 菜单，如何 select 父级

CSS menu, how to select parent

css

menu

parent-child