任意长度的相邻兄弟组合器

Question

是否可以简化以下选择链，使其匹配任意长度的连续未检查输入，后跟

#id1

？

#parent > input:not(:checked) + input:not(:checked) + input:not(:checked) + #id1 { background-color: red; }

CSS 中是否有类似正则表达式通配符语句（可能类似于

[input:not(:checked) + ]*

）的东西？

#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#child {
  width: 50%;
  height: 50%;
  background-color: green;
}

label {
  border: 1px solid black;
}

#one:checked~#child {
  background-color: yellow;
}

#two:checked~#child {
  background-color: pink;
}

#three:checked~#child {
  background-color: purple;
}

input:not(:checked)+input:not(:checked)+input:not(:checked)+#child {
  background-color: gray;
}

<div id="parent">
  <input type="radio" name="unique" id="one" value="1" hidden>
  <input type="radio" name="unique" id="two" value="2" hidden>
  <input type="radio" name="unique" id="three" value="3" hidden>
  <div id="child">
    <label for="one">one</label>
    <label for="two">two</label>
    <label for="three">three</label>
  </div>
</div>

最小示例：https://codepen.io/anick_/pen/dywNzrb

Answer 1

您可以考虑使用一个选择器，在没有检查前面的同级元素时进行选择：

#child:not(input:checked ~ *)

#parent {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

#child {
  width: 50%;
  height: 50%;
  background-color: green;
}

label {
  border: 1px solid black;
}

#one:checked~#child {
  background-color: yellow;
}

#two:checked~#child {
  background-color: pink;
}

#three:checked~#child {
  background-color: purple;
}

#child:not(input:checked ~ *) {
  background-color: gray;
}

<div id="parent">
  <input type="radio" name="unique" id="one" value="1" hidden>
  <input type="radio" name="unique" id="two" value="2" hidden>
  <input type="radio" name="unique" id="three" value="3" hidden>
  <div id="child">
    <label for="one">one</label>
    <label for="two">two</label>
    <label for="three">three</label>
  </div>
</div>