html - CSS选择组的单选按钮在检查一个之前

Question

我想为一组中的一些单选按钮设置样式。我不能使用任何 JS，所以只能使用 css。

<input type="radio" name="attr_1" value="1">
<input type="radio" name="attr_1" value="2">
<input type="radio" name="attr_1" value="3">
<input type="radio" name="attr_1" value="4">
<input type="radio" name="attr_1" value="5">

使用 :checked 选择器，我可以更改所选输入的外观，但我希望能够选择所有单选按钮，其值低于我选中的单选按钮。

input[type='radio'] {
    background-color: red
}

input[type='radio']:checked + input {
    background-color: black
}

例如，如果选择值为 3 的单选按钮，它将具有红色背景，但我也希望 1 和 2 具有红色背景。使用 JS 我很容易做到这一点，但我只能使用 CSS。

有什么方法可以让我拥有所有后续输入，而不是仅在 ckecked 后面的 1 个输入？

Answer 1

感谢@mpro，我可以想出一种方法来使我的所有后续样式与选中元素之前的样式区分开来。

<input type="radio" name="attr_1" value="1">
<input type="radio" name="attr_1" value="2">
<input type="radio" name="attr_1" value="3">
<input type="radio" name="attr_1" value="4">
<input type="radio" name="attr_1" value="5">

input {
    background-color: red;
}
input:checked ~ input {
    background-color: black
}

这要求我至少选择一个 Radiobutton，但我还是做到了。感谢大家的帮助