评分功能在如今已经十分普及，几乎处处都能见到评分功能，比如点完外卖可以评分、看完电影可以评分、坐出租车也可以评分，对别人进行评分已经深入生活。关于评分，见到的最多的就是星星评分，可以有 1~5 的评分范围。此类功能 JS 插件居多，但今天我们用 CSS3 来实现这个效果。
原理分析
首先我们先把 5 个星星拆分成 5 个 input，每个 input 对应不同的评分。这样我们可以通过选择不同的 input 来提交不同的评分。
然后就是样式的编写，因为 input 不能直接更改样式，这里我们用 label 来实现联动。
最后就是关于样式的实现，这里我们需要了解两个东西 :checked 和 ~ 这两个CSS选择器。
:checked 只适用于 type 为 checkbox 和 radio 的 input，可以通过这选择器匹配已经被勾选的 input。
~ 是一个比较少用的选择器，比如 element1~element2 它匹配的是 element1 元素的后面所有的 element2 元素。其中有一个限制，就是这两个元素的父元素要一致。
实现过程
前面了解了基本原理，现在我们开始实现，很简单，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现星星评分 Star Rating</title>
<style>
.star_rating {
}
.star_rating input {
width: 0;
height: 0;
margin: 0;
visibility: hidden;
}
.star_rating label {
display: block;
float: left;
width: 1em;
height: 1em;
line-height: 1em;
text-align: center;
font-size: 124px;
font-weight: bold;
color: red;
}
.star_rating label:before {
content: "★";
}
.star_rating input:checked~input~label:before {
content: "☆";
}
</style>
</head>
<body>
<div class="star_rating">
<input type="radio" value="1" name="star_rating" id="star_rating_1">
<label for="star_rating_1"></label>
<input type="radio" value="2" name="star_rating" id="star_rating_2">
<label for="star_rating_2"></label>
<input type="radio" value="3" name="star_rating" id="star_rating_3" checked="checked">
<label for="star_rating_3"></label>
<input type="radio" value="4" name="star_rating" id="star_rating_4">
<label for="star_rating_4"></label>
<input type="radio" value="5" name="star_rating" id="star_rating_5">
<label for="star_rating_5"></label>
</div>
</body>
</html>
效果
