是否有一个 CSS 选择器可以用来在选中复选框后显示元素，无论它在页面上的什么位置？

Question

使用 ~ css selector it is possible to display some elements once a checkbox is clicked, which can be used to display and hide menus once elements are clicked, as this tutorial shows.

但是波浪号 selector 并没有 select 页面上的所有元素，有 selector 吗？

我希望在单击复选框后显示或隐藏 .showtext 和 .hidetext <span> 标签。 Here is a js fiddle link.

HTML

<!-- The checkbox input & label partner -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">Menu 
<span class="showtext">show menu</span>
<span class="hidetext">hide menu</span>
</label>

<!-- The navigation we wish to toggle -->
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Articles</a></li>
        <li><a href="">Colophon</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

CSS

.hidetext { display: none }
input[type="checkbox"]:checked  .hidetext{
   display: block; 
}

/* Set the input position to absolute, send it off screen with zero opacity */
input[type="checkbox"] {
    left: -9999px;
    opacity: 0;
    position: absolute;
}

/* Minor visual styling to make the label more button-y */
label {
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px;
}

/* Set nav to absolute (avoids odd page rendering space pop-in) */
nav {
    opacity: 0;
    position: absolute;
    z-index: -2;
}

/* Show nav when checkbox is checked */
input[type="checkbox"]:checked ~ nav {
    opacity: 1;
    z-index: 1;
}

Answer 1

据我所知，你仍然不能在 CSS 中执行此特定操作，但我可能是错的。

我最好的建议是在这种情况下使用 JavaScript，因为该元素可以位于页面上的任何位置，而且我认为没有 CSS 选择器可以像那样导航。

使用 JavaScript 会更容易、更快捷:)

Answer 2

CSS 中的 ~ 表示“一般兄弟”，因此与选择器处于同一级别（同一父级）的任何元素。而 + 选择器将代表“下一个”兄弟姐妹。

要回答您的问题，否。没有 CSS 方法来关闭代码中任何位置的更改。您需要使用 javascript 跟踪复选框的状态，然后使用 add/remove 样式。

但是，您可以仅使用 CSS 完成所需的操作，只需将导航 hide/show 放在与 HTML 中的复选框元素相同的父级内，然后使用视觉样式来管理它的外观。

在这种情况下，将所有内容都放在 <label> 中，这样任何点击（如点击文本）都会切换输入。然后你可以根据需要完全隐藏复选框。

这是一个例子：

#container {
 position: absolute;
 top: 20px;
 bottom: 20px;
 left: 20px;
 width: 75%;
 border: 1px solid #ddd;
 overflow:hidden;
}

input {
  position: absolute;
  left: -9999px;
}
.button {
  display:inline-block;
  background: blue;
  padding: 5px 10px;
  color:#fff;
  border-radius: 5px;
  margin: 20px;
  cursor:pointer;
}
.button:after{
 content: "show nav";
}

ul {
  position: absolute;
  right: 0;
  top:0;
  bottom: 0;
  background: #333;
  color: #dadada;
  padding:0;
  margin:0;
  transition: transform 0.5s ease-in-out;
  transform: translateX(100%);
}

li {
  display:block;
  list-style: none;
  padding: 5px 30px;
}

input:checked ~ .button:after {
  content: "hide nav";
}

input:checked ~ ul {
  transform: translateX(0);
}

<div id="container">
  <label>
    <input type="checkbox">
    <span class="button"></span>
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    <ul>
  </label>
</div>

Answer 3

我认为复选框的问题在于这些跨度位于您正在检查的复选框的标签内。这是一个纯粹的 HTML/CSS 方法，它使用带有 label 的 :after 伪元素为您提供所需的结果，以显示和隐藏“显示菜单”和“隐藏菜单”文本。希望对你有用。

.hidetext { display: none }
input[type="checkbox"]:checked  .hidetext{
   display: block; 
}

/* Set the input position to absolute, send it off screen with zero opacity */
input[type="checkbox"] {
    left: -9999px;
    opacity: 0;
    position: absolute;
}

/* Minor visual styling to make the label more button-y */
label {
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    padding: 10px;
}

/* Set nav to absolute (avoids odd page rendering space pop-in) */
nav {
    opacity: 0;
    position: absolute;
    z-index: -2;
}

/* Show nav when checkbox is checked */
input[type="checkbox"]:checked ~ nav {
    opacity: 1;
    z-index: 1;
}

label:after {
  content: " show menu"
}

input[type="checkbox"]:checked ~ label:after {
  content: " hide menu";
}

<!-- The checkbox input & label partner -->

<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">Menu</label>


<!-- The navigation we wish to toggle -->
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Articles</a></li>
        <li><a href="">Colophon</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

Answer 4

我可以通过 CSS:

实现切换“显示菜单”和“隐藏菜单”文本的目标

input[type="checkbox"]:checked ~ label .hidetext{
   display: block; 
}

input[type="checkbox"]:checked ~ label .showtext {
  display: none;
}

请记住 CSS 选择器是从右到左解析的，因此要理解这一点，请阅读第一个规则集：

.hidetext that is inside of a label that is a sibling of a :checked element that also has an attribute type whose value is checkbox that is also an input element.

你会读第二个：

.showtext that is inside of a label that is a sibling of a :checked element that also has an attribute type whose value is checkbox that is also an input element.

阅读选择器时请密切注意此处：我的选择器以同级元素内部的元素为目标。

波浪号选择器（又名通用同级选择器）以左侧元素之后的任何元素为目标。这意味着您可以使用 ~ 来定位兄弟姐妹和 nieces/nephews（children 兄弟姐妹）。仅警告是它们必须在标记中稍后出现，仅此而已。

所以 input 可以控制页面上任何内容的显示，只要它是 <body>
中的第一件事
另外请记住，您对 <input> 和 <label> 元素具有特殊的能力：

如果您使用 id 和 for 属性：<label for="myInput">Click It</label> <input id="myInput">，然后单击 <label> 会将焦点转移到 <input>，这意味着单击 <label> 会将 <input> 设置为 :checked

也就是说，

<label> 是 <input>
的代理
<label> 可以放在页面的任何位置，只要 for 和 id 匹配即可。

请记住，虽然 label-checkbox hack 是一种在 CSS 中存储状态和创建条件演示文稿的有趣方式，但它不一定是好的或可持续的。

从长远来看，您的代码库将受益于 JavaScript 中不会对标记产生强烈依赖的几行代码。

是否有一个 CSS 选择器可以用来在选中复选框后显示元素，无论它在页面上的什么位置？

Is there a CSS selector I can use to show an element once a checkbox is selected, no matter where it is on the page?

html

css

checkbox

css-selectors