css - 反转将颜色应用于 sibling 的方向

Question

input:checked ~ label {
    color: red;
}

<input type='radio' name='color'>
<label>black</label>
<input type='radio' name='color'>
<label>green</label>
<input type='radio' name='color'>
<label>yellow</label>
<input type='radio' name='color'>
<label>red</label>
<input type='radio' name='color'>
<label>blue</label>
<input type='radio' name='color'>
<label>gray</label>
<input type='radio' name='color'>
<label>azure</label>
<input type='radio' name='color'>
<label>white</label>

如何使用 color: red 反转为 labels 着色的方向，现在，当我点击 black 时，一切都得到了color: red，但我想要反过来，所以当我点击 white 时，所有内容都变成了 color: red

Answer 1

你可以像这样考虑 flexbox 和倒序:

div {
  display: flex;
  flex-direction: row-reverse;
}

input:checked~label {
  color: red;
}

input:first-child {
  margin-right:auto;
}

<div>
  <input type='radio' name='color'>
  <label>white</label>
  <input type='radio' name='color'>
  <label>azure</label>
  <input type='radio' name='color'>
  <label>gray</label>
  <input type='radio' name='color'>
  <label>blue</label>
  <input type='radio' name='color'>
  <label>red</label>
  <input type='radio' name='color'>
  <label>yellow</label>
  <input type='radio' name='color'>
  <label>green</label>
  <input type='radio' name='color'>
  <label>black</label>
</div>