使用伪事件更改两个 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

~ 选择器只适用于它的同级，所以我建议将 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() （没试过...）

Answer 2

如您所见，前两个 CSS 规则按预期工作，但其他规则不工作。原因是 label 是 input 的兄弟，紧跟在 input 之后，CSS select 中的 + 或对应于.

但是 #menu_content 不是兄弟（正如 ~ 所要求的），它高两级。

如果没有脚本，您将无法执行此操作，select 祖先没有 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>

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

Changing style properties of two html elements, with pseudo events

html

css

css-selectors

pseudo-class

pseudo-element