Html 如何防止在分级系统中突出显示所有单选按钮

我正在创建一个有2个区域的星级评定系统来评定2排星级。当我在第一排星星中选择评级时，它工作正常。但是，当我在第二行选择时，无论我选择什么评级，所有五颗星都会高亮显示。谁能帮我解决CSS哪里出了问题

身体{ 填充：50px； } .明星{ 背景：urlstars.png repeat-x 0 0； 宽度：150px； 保证金：0自动； } .stars1{ 背景：urlstars1.png repeat-x0； 宽度：150px； 保证金：0自动； } .stars输入[类型=收音机]{ 位置：绝对位置； 不透明度：0； 过滤器：alphaopacity=0； } .stars1输入[类型=收音机]{ 位置：绝对位置； 不透明度：0； 过滤器：alphaopacity=0； } .stars输入[type=radio].star-5:已选中~span1{ 宽度：100%； } .stars1输入[类型=收音机].stars-5:已选中~span2{ 宽度：100%； } .stars输入[type=radio]。star-4:已选中~span1{ 宽度：80%； } .stars1输入[type=radio].stars-4:已选中~span2{ 宽度：100%； } .stars输入[type=radio].star-3:已选中~span1{ 宽度：60%； } .stars1输入[type=radio].stars-3:已选中~span2{ 宽度：100%； } .stars输入[type=radio]。star-2:已选中~span1{ 宽度：40%； } .stars1输入[type=radio].stars-2:已选中~span2{ 宽度：100%； } .stars输入[type=radio]。star-1:已选中~span1{ 宽度：20%； } .stars1输入[type=radio].stars-1:已选中~span2{ 宽度：100%； } .星号标签{ 显示：块； 宽度：30px； 高度：30px； 边距：0！重要； 填充：0！重要； 文本缩进：-999em； 浮动：左； 位置：相对位置； z指数：10； 背景：透明！重要； 光标：指针； } .stars1标签{ 显示：块； 宽度：30px； 高度：30px； 边距：0！重要； 填充：0！重要； 文本缩进：-999em； 浮动：左； 位置：相对位置； z指数：10； 背景：透明！重要； 光标：指针； } .星星标签：悬停~span1{ 背景位置：0-30px； } .star1标签：悬停~span2{ 背景位置：0-30px； } .star标签。star-5：悬停~span1{ 宽度：100%！重要； } .stars1标签。stars-5：悬停~span2{ 宽度：100%！重要； } .stars标签。star-4：悬停~span1{ 宽度：80%！重要； } .stars1标签。stars-4：悬停~span2{ 宽度：80%！重要； } .stars标签。star-3：悬停~span1{ 宽度：60%！重要； } .stars1标签。stars-3：悬停~span2{ 宽度：60%！重要； } .stars标签。star-2：悬停~span1{ 宽度：40%！重要； } .stars1标签。stars-2：悬停~span2{ 宽度：40%！重要； } .stars标签。star-1：悬停~span1{ 宽度：20%！重要； } .stars1标签。stars-1：悬停~span2{ 宽度：20%！重要； } .星条旗1{ 显示：块； 宽度：0； 位置：相对位置； 排名：0； 左：0； 高度：30px； 背景：urlstars.png repeat-x0-60px； -网络工具包过渡：-网络工具包宽度0.5s； -moz过渡：-moz宽度0.5s； -ms转换：-ms宽度0.5s； -o-过渡：-o-宽度0.5s； 过渡：宽度0.5s； } .stars1 span2{ 显示：块； 宽度：0； 位置：相对位置； 排名：0； 左：0； 高度：30px； 背景：urlstars1.png repeat-x0-60px； -网络工具包过渡：-网络工具包宽度0.5s； -moz过渡：-moz宽度0.5s； -ms转换：-ms宽度0.5s； -o-过渡：-o-宽度0.5s； 过渡：宽度0.5s； } 1. 2. 3. 4. 5. 1. 2. 3. 4. 5.

---

对于所有stars1选择器，您忘记为span2指定不同的宽度，并且所有这些选择器都设置为100%宽度。在css中编辑这些内容

.stars1 input[type="radio"].stars-5:checked ~ #span2 {
    width: 100%;
}
.stars1 input[type="radio"].stars-4:checked ~ #span2 {
    width: 80%;
}
.stars1 input[type="radio"].stars-3:checked ~ #span2 {
    width: 60%;
}
.stars1 input[type="radio"].stars-2:checked ~ #span2 {
    width: 40%;
}
.stars1 input[type="radio"].stars-1:checked ~ #span2 {
    width: 20%;
}

---

谢谢你，我是一个新用户。@kish77。如果您有任何其他疑问，请在您获得足够的声誉后再进行调查。我还记得我的第一个问题有多傻你可以查一查。祝你一切顺利！