评星--css

千万不要小瞧css，下一秒你会惊呆

之前听别人说过，可以用纯css实现一个类似滴滴评星服务，后来也去百度了一下，记得曾经找到过，但是后来却没有找到，看了别人一个关于实现滑动开关的demo，忽然有点了思路。
在这个评星的demo上，我们需要先来分析一下，五颗星，需要有颜色的改变，改变是通过点击来实现的，那么如何用css来实现点击事件呢？有很多人尝试使用:active,我没有做过尝试，但我觉得
用单选框或者复选框，应该会更巧妙一点。
大家肯定都知道，复选框或者单选框的默认样式，可谓惨不忍睹。跟五角星，那可是八竿子打不着，所以，要使用这个标签了。我们首先去看下w3c上是怎么定义这个标签的。
lable标签解释
相信看了这个以后，大家肯定就有思路了，我们用lable标签去做五角星，用单选框来触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="evaluate">
        <input type="radio" name="agree" id="agree1">
        <label for="agree1">★</label>
        <input type="radio" name="agree" id="agree2">
        <label for="agree2">★</label>
        <input type="radio" name="agree" id="agree3">
        <label for="agree3">★</label>
        <input type="radio" name="agree" id="agree4">
        <label for="agree4">★</label>
        <input type="radio" name="agree" id="agree5">
        <label for="agree5">★</label>
    </div>

我们需要知道点了那颗星，同时来进行样式的操作，这需要用到css的两个选择器，”+”、”~”。
那先来解释一下这两个选择器的用法：

1
2
div+p {color:#ff0000}     /*选择紧接在 <div> 元素之后的所有 <p> 元素*/
p~ul {text-align:center}  /*选择前面有 <p> 元素的每个 <ul> 元素。*/

可能这样在理解上会有一定的偏差，我们用jquery的来解释下，相信会更清楚。

1
2
$('div').next('p');
$('p').nextAll('ul');

这样应该就更方便理解了。所以，我们的css代码如下：

1
2
3
4
5
6
7
8
9
10
11
*{margin: 0;padding: 0}
*{-webkit-tap-highlight-color: rgba(0,0,0,0);outline: none}
.evaluate {width: 95%;margin: 0 auto}
.evaluate input[type=radio] {display: none}
.evaluate label {
    font-size: 60px;
    color: #999999;
    float: right;
}
.evaluate input[type=radio]:checked + label {color: #F1B109}
.evaluate input[type=radio]:checked ~ label {color: #F1B109}

接下来就是线上demo喽：http://7xsqnr.com1.z0.glb.clouddn.com/didi.html