Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

.table_wrapper.active {
background: black
}

＆＃13;

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

＆＃13;

Answer 2

这是可行的。该元素需要是兄弟（并排）才能发挥作用。

目前css中没有“父选择器”：Is there a CSS parent selector?

因此，我认为提供您正在努力实现的功能的最佳选择是使用javaScript。

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

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

：选中的选择器未更改所需的css

2 个答案: