用到的知识点:

  E:checked:单选或复选框被选中 

  E ~ F: 选择后面的兄弟节点们:选择后面的兄弟节点

  E::after,E::before: 伪元素选择器 在匹配E的元素后面(前面)插入内容

 

css代码:  

.star-box{display:table;}
.star-box label{float:right;color:#999;}
.star-box label::after{content:'★';font-size:28px;padding:5px;display:inline-block;line-height:1;}
.star-box input:checked~label,
.star-box label:hover~label,
.star-box label:hover{color:red;}

 

html代码:

  <div class="star-box">
        <input type="radio" name="star" id="star5" hidden/>
        <label for="star5"></label>

        <input type="radio" name="star" id="star4" hidden/>
        <label for="star4"></label>

        <input type="radio" name="star" id="star3" hidden/>
        <label for="star3"></label>

        <input type="radio" name="star" id="star2" hidden/>
        <label for="star2"></label>

        <input type="radio" name="star" id="star1" hidden/>
        <label for="star1"></label>
    </div>

 

效果图: