Question

我在网站上使用星级评分系统。我列出了多种产品，每种产品都有5星，实际上是收音机，因此用户可以评分。这些星星默认情况下只是轮廓，它们会被填充以显示当前或用户的评分。我将i覆盖起来以填充它们。

这一切都很好，但是我列表中只有一个项目根本行不通，而其他所有项目都行了。看来，已检查输入的<i>不是css的目标。

完整代码，错误出现在“ Gorilla Glue”上，并带有空星星-其他所有元素都起作用：https://jsfiddle.net/ha04cmdf/1/（对不起，很多不必要的CSS，底部的重要部分）。

<span class="star-rating-user strainrater green" data-strainid="5a037b83f5092735b2239467">
<input class="first" type="radio" name="rating_gorilla-glue" value="1"><i></i>
<input class="second" type="radio" name="rating_gorilla-glue" value="2"><i></i>
<input class="third" type="radio" name="rating_gorilla-glue" checked="true" value="3"><i></i>
<input class="fourth" type="radio" name="rating_gorilla-glue" value="4"><i></i>
<input class="fifth" type="radio" name="rating_gorilla-glue" value="5"><i></i>
</span>


.star-rating-user input:checked+i, .star-rating-shop input:checked+i {
    opacity: 1;
}
.star-rating-user.green i, .star-rating-shop.green i {
    background: green;
    background-size: contain;
}
.star-rating-user i ~ i ~ i, .star-rating-shop i ~ i ~ i {
    width: 60%;
}

Answer 1

输入上有

2个同名实例。.感谢Turnip

Answer 2

现在将rating_gorilla-glue更改为rating_gorilla-glue1。

输入异常行为：checked + i

2 个答案: