css - 来自不同列表的第一个未选中的复选框 - 仅在可能的情况下使用 CSS

Question

我试图突出显示整个页面上第一个未选中复选框后面的标签，该标签由类似这样的内容组成(为清楚起见，省略了 div 标签之间的额外 html):

.challenges input[type="checkbox"]:not(:checked)~label {
  color: lime;
}

<div class="challenges">
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
</div>
<div class="challenges">
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
</div>
<div class="challenges">
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
</div>
<div class="challenges">
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
</div>

但是这会检查所有经过净检查的复选框。我一直在尝试 first-of-type 等，但没有成功。

Answer 1

[From comments] Was hoping to find a CSS only way to indicate the label behind the first unchecked checkbox instead of going for a JavaScript approach and add extra fluff which might not be needed. If there's a way with CSS only with some reshuffling or adding some html element to the above please provide it.

只有当它们都在同一级别时才有可能，如果多个分组 DIV 减少到一个，那么它们都有相同的父级。

然后您可以为紧跟在未选中复选框之后的一个复选框设置颜色，并为复选框后面的每个标签重置它，该复选框是未选中复选框之后的同级...

.challenges input[type="checkbox"]:not(:checked) + label {
  color: lime;
}

.challenges input[type="checkbox"]:not(:checked) ~ input[type="checkbox"] + label {
  color: #000;
}

<div class="challenges">
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
  <input type="checkbox">
  <label for="">test 01</label>
  <input type="checkbox">
  <label for="">test 02</label>
  <input type="checkbox">
  <label for="">test 03</label>
</div>