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不能影响它之前的任何事情，它只能影响目标元素改变后的内容，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用纯JS，JQuery或CSS。

这是一个纯JS解决方案。如果你想在加载时设置它，你可以在DOM准备好时调用myFunction。

＆＃13;

function myFunction() {
  var cb = document.getElementById('menu-open');
  var logo = document.getElementById('logo');

  if (cb.checked) {
    logo.setAttribute("class", "newClass");
  } else {
    logo.removeAttribute("class");
  }
}

＆＃13;

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

＆＃13;

<div id="logo" class="logoib">Logo

</div>
<input type="checkbox" id="menu-open" onchange="myFunction()">

<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>

＆＃13;

复选框选中时如何添加div的css？

2 个答案: