如何在 css/scss 中从孩子定位父母的兄弟姐妹？ [复制]答案

【问题标题】：How to target the sibling of a parent from a child in css/scss? [duplicate]如何在 css/scss 中从孩子定位父母的兄弟姐妹？ [复制]
【发布时间】：2019-05-23 22:47:39
【问题描述】：

如何从孩子定位父母的兄弟姐妹？我正在尝试制作一个纯 CSS 汉堡菜单，我在标签内输入了这个复选框：在内容是 trigram.

之前

在桌面视图中，ul 列表显示为块状，而在移动端则没有。现在当 ul 是输入框的直接兄弟时，显示和隐藏工作，波浪号选择器工作。

但是我想要做的是取出标签内的 ul 作为它自己的兄弟，所以输入是标签的唯一孩子。去掉 ul 后，显示和隐藏不再起作用。

检查输入时如何定位 ul？

HTML：

<nav>
    <label class="nav-toggler">
        <input type="checkbox" />
    </label>
    <ul class="nav-links">
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</nav>

SCSS：

.nav-toggler{
    &:before{
        content:'\2630';
    }
    input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked ~ .nav-links{
           display: block;
        }
    }
}

【问题讨论】：

css 无法爬树...但是您可以将输入替换为带有 for 属性的标签，并隐藏上一层的复选框。它将允许下树和下一个兄弟<nav><input checkbox id="idimpt"><div><label for="idimpt"></label><div><u> .... 基本上，该结构可用于 :checked 选择器
@G-Cyr 嘿，谢谢您的回复，但是如何？我似乎无法想象它。谢谢！
把输入放在外面，给它一个id。为标签赋予带有输入 id 值的 for 属性。单击标签将在页面中的任何位置切换输入的选中状态
@G-Cyr 非常感谢！
这里是方法/演示codepen.io/anon/pen/qGxYjb

标签： html css sass css-selectors

【解决方案1】：

您应该使用带有 id 和 for 属性的标签和输入

寻找父选择器是一种错误的方法，在 CSS 中是不可能的参见Is there a CSS parent selector?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

将<label> 与<input> 元素相关联提供了一些主要优势：

标签文本不仅在视觉上与其对应的文本输入相关联；它也以编程方式与之关联。这意味着，例如，当用户专注于表单输入时，屏幕阅读器会读出标签，使辅助技术用户更容易理解应该输入哪些数据。

您可以单击关联的标签来聚焦/激活输入，以及输入本身。这种增加的点击区域为任何试图激活输入的人提供了优势，包括那些使用触摸屏设备的人。

你的 HTML 可以变成

<nav>
  <input type="checkbox" id="myId" />
  <label class="nav-toggler" for="myId">
    </label>
  <ul class="nav-links">
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</nav>

和 (S)CSS 规则

.nav-toggler{
    &:before{
        content:'\2630';
      cursor:pointer;
    }
}
    input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked ~ .nav-links{
           display: block;
        }
    }

【讨论】：