如何使用 CSS 选择父元素的兄弟姐妹？ [复制]答案

【问题标题】：How to select the sibling of a parent element with CSS? [duplicate]如何使用 CSS 选择父元素的兄弟姐妹？ [复制]
【发布时间】：2021-08-04 17:05:18
【问题描述】：

当输入检查时，我想从 .Hamburger 元素中选择 .nav-Menu 元素。我该怎么做？

<div class="Hamburger">
    <input type="checkbox">
    <span></span>
    <span></span>
    <span></span>
</div>
<div class="nav-Menu">
    <div class="nav-Item">
        <a href="#">Suspendisse et diam</a>
        <div class="sub-Menu">
            <div class="nav-Item"><a href="#">Sollicitudin orci sed</a></div>
            <div class="nav-Item"><a href="#">Mauris a tellus laoreet</a></div>
        </div>
    </div>
</div>

【问题讨论】：

不能单独使用 CSS。您需要编写脚本。
正如@SumitSahay 提到的，这在CSS 中是不可能的。您将需要使用 JavaScript 来实际“选择”或模拟单击菜单项。
请提供有关您正在尝试做什么的其他上下文。在选中复选框时“选择”菜单项在 CSS 中是不可能的。但是，如果您尝试使用输入展开/折叠带有纯 CSS 的汉堡菜单或子菜单，这是可能的。请澄清。

标签： html css css-selectors

【解决方案1】：

仅限 CSS，您使用标签显示（动画）汉堡图标，并隐藏通过 ~ 选择器切换菜单可见性的复选框。

我添加汉堡动画是为了好玩，主要是因为我最近做了一个。

/** THE RELEVANT CODE FOR ANSWERING YOUR QUESTION **/

#hamburger_checkbox {
  display: none;
}

.nav-Menu {
  display: none;
}

#hamburger_checkbox:checked ~ .nav-Menu {
  display: block;
}

/* HAMBURGER ICON */

label.hamburger-container {      
  --hamburger-icon-color: #000;
  --hamburger-icon-size: 20px;
  --hamburger-icon-stroke-height: 2px;
  --hamburger-icon-stroke-width: var(--hamburger-icon-size);
  
  display: block;
  padding: 10px;

  height: var(--hamburger-icon-size);
  width: var(--hamburger-icon-size);
  
  cursor: pointer;
  position: relative;
}

/** ANIMATABLE HAMBURGER ICON ELEMENTS **/

.line,
.line::before,
.line::after {
  position: absolute;
  height: var(--hamburger-icon-stroke-height);
  width: var(--hamburger-icon-stroke-width);
  background-color: var(--hamburger-icon-color);

  pointer-events: none;
  transition: transform 250ms, top 100ms, bottom 100ms;
}

.line {
  top: 50%;
  transform: translateY(-50%);
}

.line::before,
.line::after {
  content: '';
  display: block;
}

.line::before {
  top: -6px;
}

.line::after {
  bottom: -6px;
}

/** CLOSE ANIMATION **/

#hamburger_checkbox:checked ~ .hamburger-container > .line {
  transform: rotate(45deg);
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::before,
#hamburger_checkbox:checked ~ .hamburger-container > .line::after {
  transform: rotate(90deg);
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::before {
  top: 0px;
}

#hamburger_checkbox:checked ~ .hamburger-container > .line::after {
  bottom: 0px;
}

<input type="checkbox" name="checkbox" id="hamburger_checkbox">
<label for="hamburger_checkbox" class="hamburger-container">
  <div class="line"></div>
</label>


<div class="nav-Menu">
  <div class="nav-Item">
    <a href="#">Suspendisse et diam</a>
    <div class="sub-Menu">
      <div class="nav-Item"><a href="#">Sollicitudin orci sed</a></div>
      <div class="nav-Item"><a href="#">Mauris a tellus laoreet</a></div>
    </div>
  </div>
</div>

【讨论】：

很好的解决方案，但它并没有专门解决有关 CSS 选择器的问题。