純css實現評分

用到的知識點：

　　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>

 

效果圖：