选择器后更改n个项目的样式

Question

我有一组带标签的单选按钮。

＆＃13;

＆＃13;

input[type="radio"]:checked+label{
  color:red;
}
input[type="radio"]:checked+label~label{
  font-weight:bold;
}

input[type="radio"]:checked+label~label:nth-of-type(-n+3){
  background-color:green;
}

＆＃13;

<div>
  <input type="radio" name="group1"><label>A</label><br/>
  <input type="radio" name="group1"><label>B</label><br/>
  <input type="radio" name="group1"><label>C</label><br/>
  <input type="radio" name="group1"><label>D</label><br/>
  <input type="radio" name="group1"><label>E</label><br/>
  <input type="radio" name="group1"><label>F</label>
</div>

＆＃13;

＆＃13;

＆＃13;

当我选择单选按钮时，我希望接下来的三个项目应用了一个样式。

但是，如果您运行代码段，您将看到我的代码仅突出显示div中的前三项，而不是选择后的前三项。

如何在选择后将样式应用于前三项？

基本上我希望发生以下情况：

Answer 1

一个丑陋的工作解决方案（如果我考虑到你无法改变你的html结构的情况）：

input[type="radio"]:checked+label{
  color:red;
}
input[type="radio"]:checked+label~label{
  font-weight:bold;
}

input[type="radio"]:checked+label+br+input+label{
  background-color:green;
}
input[type="radio"]:checked+label+br+input+label+br+input+label{
  background-color:green;
}
input[type="radio"]:checked+label+br+input+label+br+input+label+br+input+label{
  background-color:green;
}

<div>
  <input type="radio" name="group1"><label>A</label><br/>
  <input type="radio" name="group1"><label>B</label><br/>
  <input type="radio" name="group1"><label>C</label><br/>
  <input type="radio" name="group1"><label>D</label><br/>
  <input type="radio" name="group1"><label>E</label><br/>
  <input type="radio" name="group1"><label>F</label>
</div>