CSS星星打分特效

首先看一下效果如下：


点击第几颗星星就可以亮几颗星星哦。
HTML布局如下：

<div class="box">
		<input type="radio" id="a" name="xing">
		<label for="a">label>
		<input type="radio" id="b" name="xing">
		<label for="b">label>
		<input type="radio" id="c" name="xing">
		<label for="c">label>
		<input type="radio" id="d" name="xing">
		<label for="d">label>
		<input type="radio" id="e" name="xing">
		<label for="e">label>	
	div>

一个大的div里面放五个input标签和五个label标签。
CSS部分如下：

1） 把body标签的背景颜色调成黑色，在box这个类里面用弹性布局 display：flex，flex-direction：row-reverse意思是主轴为水平方向，起点在右端。默认值是row。

2） 把input标签里面的type=“radio”用appearance属性把属性值设置成none。

3） 把label标签的背景设置成那张 灰色星星的背景图片no-repeat：不重复；设置它的高宽，label标签是一个行内元素，用display属性把它设置成一个块级元素 。

4） 最后 .box > input:checked ~ label的意思是：相邻同胞选择器，选择被勾选的input标签后 所有的label标签［input 和 label标签有共同的父元素］；把背景设置成黄色星星的那张背景图片。

这里普及一下：
flex-direction是一个复合属性；它有4个值。
1）row：主轴为水平方向，起点在左端。
2）row-reverse：主轴为水平方向，起点在右端。
3）column：主轴为垂直方向，起点在上沿。
4）column-reverse：主轴为垂直方向，起点在下沿。