如何使用纯 CSS 一次执行 2 个复选框操作？答案

【问题标题】：How can I perform 2 checkbox actions at once w/ pure CSS?如何使用纯 CSS 一次执行 2 个复选框操作？
【发布时间】：2021-05-02 22:00:55
【问题描述】：

我正在尝试制作纯 CSS 移动菜单，但在格式化复选框标签时遇到问题。

我希望复选框标签变为黄色并显示移动菜单，但我只能获取菜单。

我知道输入标签只会影响相邻的元素，但我在其他地方看到过这种方法。

请帮忙！

这是我的 jsfiddle： https://jsfiddle.net/ichormosquito/wqzj36nh/15/

 <input id="menu-btn" type="checkbox"  /> 
        
        <label for="menu-btn" class="overlord">
    <span id="hamburger" class="hamb"  /></label>   
                    
        <ul id="mobmen">
            <li>HOME</li>
       <li>ABOUT</li>
        <li>CONTACT</li>
       <li>SHOP</li>
       <li>BLOG</li>
       
      </ul>



#menu-btn { visibility: hidden; position: absolute; }

#hamburger { background-color: blue;
      
      float: right; margin-right: 10px;  cursor: pointer;  background-size: 60px; width: 60px; height: 60px;
      }
      
      #menu-btn:checked + #hamburger {background-color: yellow;}
        
                
            #mobmen {
  display: none; 
  } 
  
        
    #menu-btn:checked ~ #mobmen {
  display: block;
}  
            
            
                
            #menu-btn:focus { outline: 0; }
        
            .mobilemenu a { color: #ffffff;}
             ul#mobmen {
    text-align: center;
    clear: both;
    
    line-height: 100px;
    font-family: 'brandon-grotesque';
    font-weight: 500;
    color: #ffffff;
    font-size: x-large; }
            
      ul#mobmen li {
            
    border-top: solid 2px #220000;
                background-color: #440000;
                }
            
            ul#mobmen li:hover {
            
                background-color: #660000;
                }
            
            ul#mobmen li:focus {
            
                background-color: #660000;
                }

【问题讨论】：

标签： css checkbox mobile drop-down-menu

【解决方案1】：

您没有深入了解标签内的跨度

#menu-btn:checked + label #hamburger {...}

#menu-btn {
  visibility: hidden;
  position: absolute;
}

#hamburger {
  background-color: blue;
  float: right;
  margin-right: 10px;
  cursor: pointer;
  background-size: 60px;
  width: 60px;
  height: 60px;
}

#menu-btn:checked+#hamburger {
  background-color: yellow;
}

#mobmen {
  display: none;
}

#menu-btn:checked+label #hamburger {
  background-color: yellow;
}

#menu-btn:checked~#mobmen {
  display: block;
}

#menu-btn:focus {
  outline: 0;
}

.mobilemenu a {
  color: #ffffff;
}

ul#mobmen {
  text-align: center;
  clear: both;
  line-height: 100px;
  font-family: 'brandon-grotesque';
  font-weight: 500;
  color: #ffffff;
  font-size: x-large;
}

ul#mobmen li {
  border-top: solid 2px #220000;
  background-color: #440000;
}

ul#mobmen li:hover {
  background-color: #660000;
}

ul#mobmen li:focus {
  background-color: #660000;
}

<input id="menu-btn" type="checkbox" />

<label for="menu-btn" class="overlord">
   <span id="hamburger" class="hamb" />
</label>

<ul id="mobmen">
  <li>HOME</li>
  <li>ABOUT</li>
  <li>CONTACT</li>
  <li>SHOP</li>
  <li>BLOG</li>
</ul>

【讨论】：