Question

我正在使用画布菜单，我一直在尝试正常工作。为了让我的固定菜单和非画布很好地播放，我不得不把我的标题从画布内包装中取出，但现在我的标题在菜单打开时不会移动。

当关闭画布时，它会将.is-open-right应用于内部包装器，然后将CSS应用于它。

我只是在将.is-right-open类添加到我的包装器时尝试将这行CSS添加到我的标题中。

-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>

我是否只能在下一个兄弟元素具有类时才能定位我的头元素.is-open-right ??从我所读过的内容来看，我可能不得不去寻找JS解决方案。

Answer 1

没有'上一个兄弟'选择器。您的解决方案应该是确保将类应用于父元素。

您的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

1 个答案: