Question

鉴于以下代码段，如果选中该复选框，是否有办法编写一个针对class="item_text"的 div 的CSS选择器？

＆＃13;

<div class="row">
  <div class="col-xs-1">
    <input name="item_checkbox" type="checkbox" />
  </div>

  <div class="col-xs-11">
    <div class="item_text" contenteditable="true">
      To rearrange your list, drag and drop items
    </div>
  </div>
</div>

＆＃13;

Answer 1

正如评论中所述，由于CSS规则无法遍历DOM，因此无法单独使用CSS。

当您使用jQuery标记问题时，您可以使用它来改变复选框状态时影响所需的元素。试试这个：

$('.row :checkbox').change(function() {
  $(this).closest('.row').find('.item_text').toggleClass('foo', this.checked);
});

.foo { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-1">
    <input name="item_checkbox" type="checkbox" />
  </div>

  <div class="col-xs-11">
    <div class="item_text" contenteditable="true">
      To rearrange your list, drag and drop items
    </div>
  </div>
</div>

Answer 2

这是可能的。我只是稍微重新安排了dom然后加了一些css：

＆＃13;

input[name=item_checkbox]:checked + div.item_text {
  display:none;
}

＆＃13;

<div class="row">

  <div class="col-xs-11">
  <input name="item_checkbox" type="checkbox" />
    <div class="item_text" contenteditable="true">
      To rearrange your list, drag and drop items
    </div>
  </div>
</div>

＆＃13;

Answer 3

只有jQuery / javascript才能实现这一点，因为CSS选择器无法向上遍历（从子级到父级）。

如何根据相邻div中选中的输入框选择div

3 个答案: