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作为示例中的复选框的兄弟。

＆＃13;

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

＆＃13;

<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>

＆＃13;

另一种选择是使用J .. 或者使用纯css将在网址中使用css选择器：target（）https://stackoverflow.com/a/9442590/2894798（避免尝试过......）

Answer 2

正如您所看到的，前两个CSS规则可以按预期工作，但其他规则则不然。原因是label是input的兄弟，并且直接跟在input之后，而CSS选择器中的+对应于此。{/ p>

但#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>

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

2 个答案: