使用伪事件更改两个 html 元素的样式属性

Question

我编写了一个 CSS 代码，它通过事件更改了另外两个 html 元素的样式属性。 选中复选框时，我想更改标签框和 div 标签的背景颜色。当我取消选中复选框时，背景颜色必须与前一个切换。 该代码正在更改标签标签的 css 属性。但不适用于 div 标签。 这是 CSS：

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked ~ #menu_content
{
     height:100vh;
        width:25vh;
        position:fixed;
        left:0;
        top:11%;
        background-color:#41a3d8;
}
input[type=checkbox]:not(:checked) ~ #menu_content
{
     height:100vh;
        width:25vh;
        position:fixed;
        left:0;
        top:11%;
        background-color:#fff;
        border-style:solid;
        border-width:1px 1px 1px 1px;
}

这里是html代码：

<div id="header">
    <span id="nav_button">
        <input type='checkbox' name='thing' id="thing"/>
        <label for="thing">
        </label> 
    </span>
    <span id="title">
        &lt;TITLE&gt;
    </span>
</div>
<div id="menu_content">
    <p id="menu_head">
        Nav
    </p>
    <a href="#" id="menu_links">
        Link1
    </a>
    <a href="#" id="menu_links">
        Link2
    </a>
    <a href="#" id="menu_links">
        Link3
    </a>
</div>

我正在尝试这样做，但不使用任何类型的脚本

Answer 1

如您所见，前两个 CSS 规则可以正常工作，但其他的则不能。原因是label 是input 的兄弟，并直接跟在input 之后，CSS 选择器中的+ 对应。

但#menu_content 不是兄弟姐妹（正如~ 所要求的那样），它要高两个级别。

如果没有脚本，您将无法做到这一点，没有 CSS 方法来选择祖先。

input[type=checkbox]+label {
  background: #999;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0px;
}

input[type=checkbox]:checked~#menu_content {
  height: 100vh;
  width: 25vh;
  position: fixed;
  left: 0;
  top: 11%;
  background-color: #41a3d8;
}

input[type=checkbox]:not(:checked)~#menu_content {
  height: 100vh;
  width: 25vh;
  position: fixed;
  left: 0;
  top: 11%;
  background-color: #fff;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}

<div id="header">
  <span id="nav_button">
        <input type='checkbox' name='thing' id="thing"/>
        <label for="thing">
        </label> 
    </span>
  <span id="title">
        &lt;TITLE&gt;
    </span>
</div>
<div id="menu_content">
  <p id="menu_head">
    Nav
  </p>
  <a href="#" id="menu_links">
        Link1
    </a>
  <a href="#" id="menu_links">
        Link2
    </a>
  <a href="#" id="menu_links">
        Link3
    </a>
</div>

Answer 2

~ 选择器只适用于它的兄弟姐妹，所以我建议像示例一样将 div 设为复选框的兄弟姐妹。

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked ~ #menu_content
{
     height:100vh;
        width:25vh;
        position:fixed;
        left:0;
        top:11%;
        background-color:#41a3d8;
}
input[type=checkbox]:not(:checked) ~ #menu_content
{
     height:100vh;
        width:25vh;
        position:fixed;
        left:0;
        top:11%;
        background-color:#fff;
        border-style:solid;
        border-width:1px 1px 1px 1px;
}

<div id="header">
    <span id="nav_button">
        <input type='checkbox' name='thing' id="thing"/>
        <label for="thing">
        </label> 
        <div id="menu_content">
          <p id="menu_head">
              Nav
          </p>
          <a href="#" id="menu_links">
              Link1
          </a>
          <a href="#" id="menu_links">
              Link2
          </a>
          <a href="#" id="menu_links">
              Link3
          </a>
      </div>
    </span>
    <span id="title">
        &lt;TITLE&gt;
    </span>
</div>

另一种选择是使用 Js.. 或纯 css 将在 url 中使用 css 选择器，使用 :target() https://stackoverflow.com/a/9442590/2894798 （尚未尝试...）