如果选中复选框但如果设置是先标签然后输入,如何突出显示标签？

Question

如果选中复选框,则突出显示标签

与上述链接完全不同的设置.

设置1:

<input type="checkbox" checked>
<label>Text</label>

回答:

input:checked + label { font-weight: bold; }

设置2:

<label>Text</label>
<input type="checkbox" checked>

回答:

??

Answer 1

这是一个黑客.

• 从HTML元素顺序开始反转
• 包裹元素 flexbox
• 风格像往常一样+或~
• 通过恢复所需的订单order: -1;
• 确保将其指向label有效id

.container {
  display: flex; 
}

[type=checkbox]:checked + label {
  color: red;
}

label {
  order: -1;
}

<div class="container">
  <input id="mycheckbox" type="checkbox" checked> 
  <label for="mycheckbox">Text</label>
</div>

的jsfiddle