多个5星级评论行HTML CSS

你好，
我正在尝试建立一个5星级评级表，我想有3行5星级评级。以下是我所拥有的：

.ratingLabel{
字体系列：“蒙特塞拉特灯”，Helvetica，无衬线；
填充：8px0；
浮动：左；
颜色：#A9A9；
}
.评级{
浮动：对；
}
.评级输入{
显示：无；
}
.评级标签{
颜色：#ddd；
浮动：对；
}
.评级标签：之前{
保证金：5px；
字体大小：20px；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.评分.一半：之前{
内容：“\f089”；
位置：绝对位置；
}
.rating>input:checked~label、.rating:not（：checked）>label:hover、.rating:not（：checked）>label:hover~label{
颜色：#FFD700；
}

友好顾问：
电话线质量：
总体满意度：

大家好，
多亏了你，我终于修好了。我提供的问题和答案的链接可以被认为是这些案例的普遍解决方案。以下是对我应用的HTML的更改：

<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
                    <label class="ratingLabel">Friendly advisor:</label>
                    <div class="rating">
                        <input id="star_a-5" name="rating_a" type="radio" value="5"/>
                        <label for="star_a-5" class="full"></label>
                        <input id="star_a-45" name="rating_a" type="radio" value="4.5"/>
                        <label for="star_a-45" class="half"></label>
                        <input id="star_a-3" name="rating_a" type="radio" value="3"/>
                        <label for="star_a-3" class="full"></label>
                        <input id="star_a-35" name="rating_a" type="radio" value="3.5"/>
                        <label for="star_a-35" class="half"></label>
                        <input id="star_a-2" name="rating_a" type="radio" value="2"/>
                        <label for="star_a-2" class="full"></label>
                        <input id="star_a-25" name="rating_a" type="radio" value="2.5"/>
                        <label for="star_a-25" class="half"></label>
                        <input id="star_a-1" name="rating_a" type="radio" value="1"/>
                        <label for="star_a-1" class="full"></label>
                        <input id="star_a-15"  name="rating_a" type="radio" value="1.5"/>
                        <label for="star_a-15" class="half"></label>
                        <input id="star_a-0"  name="rating_a" type="radio" value="0"/>
                        <label for="star_a-0" class="full"></label>
                        <input id="star_a-05"  name="rating_a" type="radio" value="0.5"/>
                        <label for="star_a-05" class="half"></label>
                    </div>
                </div>
                <div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
                    <label class="ratingLabel">Call line quality:</label>
                    <div class="rating">
                        <input id="star_b-5" name="rating_b" type="radio" value="5"/>
                        <label for="star_b-5" class="full"></label>
                        <input id="star_b-45" name="rating_b" type="radio" value="4.5"/>
                        <label for="star_b-45" class="half"></label>
                        <input id="star_b-3" name="rating_b" type="radio" value="3"/>
                        <label for="star_b-3" class="full"></label>
                        <input id="star_b-35" name="rating_b" type="radio" value="3.5"/>
                        <label for="star_b-35" class="half"></label>
                        <input id="star_b-2" name="rating_b" type="radio" value="2"/>
                        <label for="star_b-2" class="full"></label>
                        <input id="star_b-25" name="rating_b" type="radio" value="2.5"/>
                        <label for="star_b-25" class="half"></label>
                        <input id="star_b-1" name="rating_b" type="radio" value="1"/>
                        <label for="star_b-1" class="full"></label>
                        <input id="star_b-15"  name="rating_b" type="radio" value="1.5"/>
                        <label for="star_b-15" class="half"></label>
                        <input id="star_b-0"  name="rating_b" type="radio" value="0"/>
                        <label for="star_b-0" class="full"></label>
                        <input id="star_b-05"  name="rating_b" type="radio" value="0.5"/>
                        <label for="star_b-05" class="half"></label>
                    </div>
                </div>
                <div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12">
                    <label class="ratingLabel">Overall satisfaction:</label>
                    <div class="rating">
                        <input id="star_c-5" name="rating_c" type="radio" value="5"/>
                        <label for="star_c-5" class="full"></label>
                        <input id="star_c-45" name="rating_c" type="radio" value="4.5"/>
                        <label for="star_c-45" class="half"></label>
                        <input id="star_c-3" name="rating_c" type="radio" value="3"/>
                        <label for="star_c-3" class="full"></label>
                        <input id="star_c-35" name="rating_c" type="radio" value="3.5"/>
                        <label for="star_c-35" class="half"></label>
                        <input id="star_c-2" name="rating_c" type="radio" value="2"/>
                        <label for="star_c-2" class="full"></label>
                        <input id="star_c-25" name="rating_c" type="radio" value="2.5"/>
                        <label for="star_c-25" class="half"></label>
                        <input id="star_c-1" name="rating_c" type="radio" value="1"/>
                        <label for="star_c-1" class="full"></label>
                        <input id="star_c-15"  name="rating_c" type="radio" value="1.5"/>
                        <label for="star_c-15" class="half"></label>
                        <input id="star_c-0"  name="rating_c" type="radio" value="0"/>
                        <label for="star_c-0" class="full"></label>
                        <input id="star_c-05"  name="rating_c" type="radio" value="0.5"/>
                        <label for="star_c-05" class="half"></label>
                    </div>
                </div>

友好顾问：
电话线质量：
总体满意度：

attribute

id

不能包含

看看这个，它可能会帮助您发现代码有问题。一旦我试图重写你的代码，它就开始工作了。不是吗？