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

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