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

[来自评论]希望找到一种唯一的CSS方式来指示第一个未选中的复选框后面的标签，而不是采用JavaScript方法并添加可能不需要的多余绒毛。如果只有通过CSS进行某种改组或在上面添加一些html元素的方法，请提供它。

只有当它们都处于同一级别时，才可能将多个分组的DIV减少为一个，以便它们都具有相同的父级。

然后，您可以立即为未选中的复选框设置一个复选框的颜色，并为复选框后面的每个标签重置颜色，该标签是未选中的复选框的兄弟姐妹...

Observable
    .fromCallable((() -> JsonRestCaller.readJsonFromUrl(buildUrl())))
    //Pass the jsonObject from above to parseJson() method
    .flatMap(jsonObject -> parseJson(jsonObject))
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
    //details is the string from parsing json
    .subscribe(
        details -> buildLocationFromDetails(details),
        error -> new Throwable(error)
    );

SELECT   name, ARRAY_AGG(month ORDER BY month DESC)
FROM     children a
WHERE    NOT EXISTS (SELECT *
                     FROM   children b
                     WHERE  a.name = b.name AND b.status = 1 and a.month <= b.month)
GROUP BY name

Answer 2

// get all checkboxes 
var firstUncheckedInput = document.querySelectorAll('.challenges input[type="checkbox"]')[0];

firstUncheckedInput.classList.add('firstCheckbox');

.challenges > label{ 
  display:flex; 
  align-items: center;
} 

.challenges .firstCheckbox:not(:checked) + span {
  color: red;
}

<fieldset class="challenges"> 
  <label>
     <input type="checkbox">
     <span>test 1</span>
  </label>
  <label>
     <input type="checkbox">
     <span>test 2</span>
  </label>
  <label>
     <input type="checkbox">
     <span>test 3</span>
  </label>
</fieldset>
<br>
<fieldset class="challenges"> 
  <label>
     <input type="checkbox">
     <span>test 4</span>
  </label>
  <label>
     <input type="checkbox">
     <span>test 5</span>
  </label>
  <label>
     <input type="checkbox">
     <span>test 6</span>
  </label>
</fieldset>

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

2 个答案: