0

这是问题所在：focus-within 适用于标记示例中的所有子元素：

<a class="open" href="#">open menu</a>
    <div class="parent">
    <a class="link1" href="#">link1</a>
    <a class="link2" href="#">link2</a>
    <div class="menu2">...123</div>
    <a class="link3" href="#">link3</a>
    <div class="menu3">...456</div>
    </div>

在此示例中，我使用 a.link2 和 a.link3 在它们处于焦点时打开菜单。我需要设置 a.link1 来关闭 div.parent 我已经做到了：

 <style>
  .parent{width:200px;height:100%;position:fixed;left:-30em;background:lightyellow;}
            .open:focus + .parent,.parent:hover{left:0;}/*opening sidebar*/
            .parent:focus-within{left:-20em;}/*closing sidebar*/
            .parent:focus-within + a.link1{left:-20em}/*closing sidebar*/
    </style>

当我点击 a.link2 和 a.link3 时，它也会关闭侧边栏，我只想申请 a.link1 才能关闭侧边栏！

我如何设置 a.link1 以关闭侧边栏而不是（a.link2 和 a.link3 和 ....）只有 css，没有 JavaScript？有什么办法吗？

.parent{width:200px;height:100%;position:fixed;left:-30em;background:lightyellow;}
        .open:focus + .parent,.parent:hover{left:0;}/*opening sidebar*/
        .parent:focus-within{left:-20em;}/*closing sidebar*/
        .parent:focus-within + a.link1{left:-20em}/*closing sidebar*/
 <a class="open" href="#">open menu</a>
    <div class="parent">
    <a class="link1" href="#">link1</a>
    <a class="link2" href="#">link2</a>
    <div class="menu2">...123</div>
    <a class="link3" href="#">link3</a>
    <div class="menu3">...456</div>
    </div>

4

1 回答 1

1

简短的回答是，您尝试使用的方法是不可能的。

原因是选择器只会自上而下。这意味着虽然父 div 可以通过单击其中一个子元素来关闭，但这只是因为focus-within选择器而成为可能。这与父母的孩子无关。如果您希望元素 A 在 CSS 中影响元素 B，则元素 A 必须是同级元素，或者至少比元素 B 高一级才能影响它。

为了仅使用 CSS 创建这种侧边栏，您必须使用“checkbox hack”。我将在这里留下一个小例子，然后解释它是如何工作的：

* {
    font-family: 'Segoe UI', monospace;
}
#toggler {
    display: none;
}
nav {
    position: fixed;
    top: 0;
    left: -150px;
    width: 200px;
    height: 100vh;
    box-shadow: 1px 2px 3px rgb(30 30 30 / 50%);
    transition: left 0.2s;
}
img {
    width: 30px;
}
label {
    display: block;
    text-align: right;
    padding: 10px;
    cursor: pointer;
}
#toggler:checked + nav {
    left: 0;
}
<input type="checkbox" id="toggler">
<nav>
    <label for="toggler">
        <img src="https://cdn4.iconfinder.com/data/icons/website-library/32/hamburger_List_hamburger_right_menu_website-512.png" alt="">
    </label>
</nav>

基本上，实际的复选框在导航之外。这样，它是否被选中都会影响导航，它是它的兄弟。但是，该复选框的标签仍在导航内部，这会创建您似乎想要的行为。当一个标签被点击时，它会影响其对应的复选框是否被选中。这让我们可以解决孩子无法在 CSS 中影响父母的问题。

编辑：

所以，我刚刚发现了另一个使用锚标签和:target伪选择器的 hack。

这是另一个片段：

nav {
    position: absolute;
    top: 0;
    left: -150px;
    width: 200px;
    height: 100vh;
    box-shadow: 1px 2px 3px rgb(30 30 30 / 50%);
    text-align: right;
    padding: 5px;
    box-sizing: border-box;
    transition: left 0.2s;
}
a {
    display: block;
    margin: 5px 0;
    font-family: 'Segoe UI', monospace;
    color: blue;
}
#open:target ~ nav {
    left: 0;
}
#close:target ~ nav {
    left: -150px;
}
<div id="open"></div>
<div id="close"></div>
<nav>
    <a href="#open">Open</a>
    <a href="#close">Close</a>
</nav>

它的工作方式是，首先，我们需要一些至少与我们的 处于同一级别的元素nav，以便它们能够影响它。每个元素都有一个 id，锚标签可以用作目标。单击锚标记时，将触发锚标记的 href 中具有 id 的元素其:target伪选择器。由于此示例中的目标元素是 的同级元素nav，因此它们可以在目标时影响其样式。~只是一个兄弟选择器，它针对任何兄弟，而不仅仅是相邻的兄弟+。

于 2021-09-11T22:14:59.047 回答