html - :checked selector not changing desired css

Question

我试图通过按下复选框来更改包装器的背景颜色。

.switch_1:checked~.table_wrapper {
  background: black;
}

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
</li>
<div class="table_wrapper">
</div>

Answer 1

如果你不能改变 DOM 结构，你不能用 CSS 做，但你可以用 JS 做。

$(".switch_1").change(function () {
$('.table_wrapper').toggleClass('active');
});

.table_wrapper.active {
background: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="nav-item">
  <div class="switch_box box_1">
    <input type="checkbox" class="switch_1">
  </div>
</li>
<div class="table_wrapper">
asd
</div>