定位上一个兄弟元素 CSS

Question

我正在使用关闭的 canvas 菜单，我一直在努力使它正常工作。为了让我的固定菜单和 off-canvas 正常播放，我不得不将我的 header 从关闭的 canvas 内包装中取出，但现在我的 header 不会打开菜单时移动。

当 off canvas 打开时，它应用一个 .is-open-right 到内包装，然后应用 CSS。

只有当 .is-right-open class 添加到我的包装器时，我才尝试将 CSS 这行添加到我的 header 中。

-webkit-transform: translateX(-450px);
    transform: translateX(-450px);

我试图以这种方式定位：

.is-open-right, .is-open-right > .header  {
-webkit-transform: translateX(-$offcanvas-size-large);
transform: translateX(-$offcanvas-size-large);

}

我的 HTML 菜单关闭时看起来像这样：

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

HTML 打开时

<div class="off-canvas-wrapper">
<header class="header scrolled" role="banner"></header>
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div>
</div>

只有当下一个兄弟元素具有 class .is-open-right 时，我才能定位我的 header 元素吗？从我读到的...看来我可能需要使用 JS 解决方案。

Answer 1

没有 'previous sibling' 选择器。您的解决方案应该是确保将类应用于父元素。

您的 HTML 应如下所示：

<div class="off-canvas-wrapper is-off-canvas-open is-open-right">
  <header class="header scrolled" role="banner"></header>
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div>
</div>

另一种选择是将 header 移到 off-canvas-wrapper-inner 下方，这样您就可以将其定位为下一个同级（使用 +）。

当前的 W3 规范草案还包括 :has pseudoselector。完全支持后，我们可以使用以下选择器解决此问题：.previous-class:has(+ .next-class)

定位上一个兄弟元素 CSS

Targeting Previous Sibling Element CSS

css

css-selectors

off-canvas-menu