html - <nav> 和 <button> 是姊妹元素。添加 <nav> 事件类后，如何为 <button> 编写 CSS？

Question

<nav class="">
    <a class="nav-item">1</a>
    <a class="nav-item">2</a>
    <a class="nav-item">3</a>
    <a class="nav-item">3</a>
    <a class="nav-item">4</a>
</nav>

<button class="mobile-button">Button</button>

上面的代码是我的 HTML 模板。如果<nav>中添加“active”类，我想将CSS写入<button>下面，我该如何选择这个？

请不要将按钮放在导航中，我需要这样做。

Answer 1

您可以使用next sibling combinator + 如果按钮紧跟在导航之后:

nav.is-active + .mobile-button {
  /* styles here */
}

或者，如果是更远的 sibling ，您可以使用 ~ subsequent sibling combinator :

nav.is-active ~ .mobile-button {
  /* styles here */
}

使用:has() pseudo-class您还可以引用有活跃 child 的父级，而不是引用目标:

body:has(nav.is-active) .mobile-button {
  /* styles here */
}

或者就像:

:has(nav.is-active) .mobile-button {
  /* styles here */
}