3

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

当关闭画布打开时，它将 .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 解决方案。

4

1 回答 1

2

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

您的 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伪选择器。完全支持后，我们可以使用以下选择器解决此问题：.previous-class:has(+ .next-class)

于 2016-04-19T23:27:40.783 回答