代码之家 › 专栏 › 技术社区 › Amir

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

css html

-1

Amir · 技术社区 · 8 年前

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

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

2 回复 | 直到 8 年前

Peter 8 年前

如果不能更改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>

admcfajn 8 年前

以下是可行的方法。元素需要是同级(并排)才能工作。

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>