Html 简单评级星CSS

我正在尝试使用HTML和CSS构建一个简单的评级系统。这是一个非常简单的评级条，由5颗星组成

字段集，
标签{
保证金：0；
填充：0；
边缘底部：20px；
}
.评级{
边界：无；
浮动：左；
}
.评级>输入{
显示：无；
}
.评级>标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.rating>.half:之前{
内容：“\f089”；
位置：绝对位置；
}
.评级>标签{
颜色：#ddd；
浮动：对；
}
.评级>输入：选中~标签，
/*单击时显示金星*/
.额定值：未（：选中）>标签：悬停，
/*悬停当前恒星*/
.额定值：未（：选中）>标签：悬停~标签{
颜色：#FFD700；
}
/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，
/*更改额定值时悬停当前星号*/
.评级>输入：选中~标签：悬停，
.评级>标签：悬停~输入：选中~标签，
/*减轻电流选择*/
.评级>输入：选中~标签：悬停~标签{
颜色：#FFED85；
}

---

只是一个输入错误-需要将

star5

更改为

5star

：

字段集，
标签{
保证金：0；
填充：0；
边缘底部：20px；
}
.评级{
边界：无；
浮动：左；
}
.评级>输入{
显示：无；
}
.评级>标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.rating>.half:之前{
内容：“\f089”；
位置：绝对位置；
}
.评级>标签{
颜色：#ddd；
浮动：对；
}
.评级>输入：选中~标签，
/*单击时显示金星*/
.额定值：未（：选中）>标签：悬停，
/*悬停当前恒星*/
.额定值：未（：选中）>标签：悬停~标签{
颜色：#FFD700；
}
/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，
/*更改额定值时悬停当前星号*/
.评级>输入：选中~标签：悬停，
.评级>标签：悬停~输入：选中~标签，
/*减轻电流选择*/
.评级>输入：选中~标签：悬停~标签{
颜色：#FFED85；
}

输入具有

id=“5star”

，标签具有

for=“star5”

。。。