前段时间在掘金看到一个标题是用纯CSS制作rate评分,然后自己就去想了一下,试了一下做了一个效果是做出来了,但代码好像有点…有待优化哈哈哈。后来回头点进去那位大哥是用SASS写的，发现确实秀。

那么先说一下我的代码的 实现思路
首先运用input的radio来做点击，然后使用伪元素 ‘~’ ，获取当前选中的后面的所有同辈元素，给后面同辈的元素添加样式。

具体是我是先用一个盒子把5个input和装着5个心的div包裹起来，然后div要在input的后面，因为配合后面使用的伪元素“~”；下面是html代码

<section id="box">
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
        <input type="radio" name="rate"><div>❤</div>
</section>

然后下面是布局，让 input 实现 绝对定位，然后让 div左浮动，放大input的选择框，让每个input定位到对应的每个div的上面，然后使用透明度将 input透明设为0，由于使用伪元素“~”所以选中的评分是反方向的，所以需要把它翻转过来，使用 transform: rotateY(180deg)翻转 过来；

下面是css代码

* {
    margin: 0;
    padding: 0;
}
#box {
    top:100px;
    right: 50%;
    transform: rotateY(180deg);
    position: relative;
}
div {
    font-size: 32px;
    line-height: 32px;
    float: left;
    color: wheat;
}
input {
    position: absolute;
    top: 0;
    left: 10px;
    transform: scale(2) translateY(40%);
    opacity: 0;
    cursor: pointer;
}
input:nth-of-type(2){
    left: calc(7px + 32px);
}
input:nth-of-type(3){
    left: calc(7px + 64px);
}
input:nth-of-type(4){
    left: calc(7px + 96px);
}
input:nth-of-type(5){
    left: calc(7px + 128px);
}
input[name='rate']:checked  + div{
    color: red; 
}
input[name='rate']:hover ~ div,
input[name='rate']:checked ~ div{
    color: red; 
}

看了那位大哥的代码后整个人都自闭了，觉得自己的好row啊 [捂脸]；
那么附上那位大哥用SASS写的（https://juejin.im/entry/5d5a420cf265da03913514fd），确实是秀！
觉得压力好大啊，现在的人都这么的优秀的嘛，自闭了。加油吧~~