Question

如何针对孩子的父母兄弟姐妹？我正在尝试制作一个纯CSS汉堡包菜单，并且在内容为 trigram

的标签内输入了此复选框。

在桌面视图上，ul列表显示为阻止，而在移动设备上则没有。现在，当ul是输入框的直接同级对象时，显示和隐藏起作用了，代字号选择器起作用了。

但是我想做的是取出标签内的ul，因为它是自己的兄弟姐妹，因此输入是标签上唯一的孩子。取消ul后，显示和隐藏将不再起作用。

检查输入后如何定位ul？

HTML：

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

SCSS：

{{1}}

Answer 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;
        }
    }

如何在css / scss中将父母的兄弟姐妹作为目标？

1 个答案: