html - 选中复选框时如何添加div的CSS？

Question

代码:

#menu-open:checked ~ .logoib {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

<div id="logo" class="logoib"></div>

<input type="checkbox" id="menu-open">

<nav class="menu-list">
  <a href="#" class="firsta">Home</a>
  <a href="#">My Works</a>
  <a href="#">Contact</a>
</nav>

<label for="menu-open" class="modmenu logoib">
  <span></span>
</label>

我想在选中菜单的复选框时添加一些 #logo 的 CSS。

Answer 1

css 不能影响它之前的任何东西，它只能影响目标元素改变之后的东西，如下所示

#menu-open + #logo {
  color: #ccc;
  font-style: italic;
} 
#menu-open:checked + #logo {
  color: #f00;
  font-style: normal;
} 

<input type="checkbox" id="menu-open">
<div id="logo" class="logoib">
  my logo here
</div>

<nav class="menu-list">
  <a href="#" class="firsta">Home</a>
  <a href="#">My Works</a>
  <a href="#">Contact</a>
</nav>

<label for="menu-open" class="modmenu logoib">
  <span></span>
</label>