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

Question

Highlight label if checkbox is checked

与上面的链接完全不同的设置。

设置1：

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

answer：

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

设置2：

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

answer：

??

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