CSS查询选择标签

Question

我想要一个查询，在检查输入标签（复选框）被选中后，在label标签内选择span标签。请帮我解决一下这个。提前致谢。

Answer 1

此代码仅在您保留订单时有效，即之后的标签复选框。

＆＃13;

＆＃13;

input[type="checkbox"]:checked+label>span {
  background: yellow;
}

＆＃13;

<input type="checkbox" />
<label>This is a label <span>with a span</span> that colours yellow</label>

＆＃13;

＆＃13;

＆＃13;

jQuery alternativ

如果您想在输入之前使用标签，那么您需要一些jQuery来执行相同的操作。请注意，输入字段需要名称，您需要在标签上设置for属性。

＆＃13;

＆＃13;

$(function() {
  $('input[type="checkbox"]').on('click', function() {
    var label = $('label[for="' + $(this).attr('name') + '"] span');
    label.toggleClass('yellow', this.checked);
  });
});

＆＃13;

.yellow {
  background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="field">This is a label <span>with a span</span> that colours yellow</label>
<input name="field" type="checkbox" />

＆＃13;

＆＃13;

＆＃13;