CSS - 评级的CSS系统

Question

我正在使用一些评级系统的CSS我发现在网上。 目前我能够把它的工作，但有多个评级时显示的问题。

只有最后一个评分等级正在工作。

.rate { 
 
    float: left; 
 
    pointer-events: none; 
 
} 
 

 
.rate:not(:checked)>input { 
 
    position: absolute; 
 
    top: -9999px; 
 
} 
 

 
.rate:not(:checked)>label { 
 
    float: right; 
 
    width: 1em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
    font-size: 30px; 
 
    color: #ccc; 
 
} 
 

 
.rate:not(:checked)>label:before { 
 
    content: '★ '; 
 
} 
 

 
.rate>input:checked~label { 
 
    color: #ffc700; 
 
} 
 

 
.rate:not(:checked)>label:hover, 
 
.rate:not(:checked)>label:hover~label { 
 
    color: #deb217; 
 
} 
 

 
.rate>input:checked+label:hover, 
 
.rate>input:checked+label:hover~label, 
 
.rate>input:checked~label:hover, 
 
.rate>input:checked~label:hover~label, 
 
.rate>label:hover~input:checked~label { 
 
    color: #c59b08; 
 
}

<div class="rate"> 
 
    <input type="radio" id="star5" name="rate" value="5" /> 
 
    <label for="star5" title="text">5 stars</label> 
 
    <input type="radio" id="star4" name="rate" value="4" checked/> 
 
    <label for="star4" title="text">4 stars</label> 
 
    <input type="radio" id="star3" name="rate" value="3" /> 
 
    <label for="star3" title="text">3 stars</label> 
 
    <input type="radio" id="star2" name="rate" value="2" /> 
 
    <label for="star2" title="text">2 stars</label> 
 
    <input type="radio" id="star1" name="rate" value="1" /> 
 
    <label for="star1" title="text">1 star</label> 
 
</div> 
 

 
<div class="rate"> 
 
    <input type="radio" id="star5" name="rate" value="5" checked/> 
 
    <label for="star5" title="text">5 stars</label> 
 
    <input type="radio" id="star4" name="rate" value="4" /> 
 
    <label for="star4" title="text">4 stars</label> 
 
    <input type="radio" id="star3" name="rate" value="3" /> 
 
    <label for="star3" title="text">3 stars</label> 
 
    <input type="radio" id="star2" name="rate" value="2" /> 
 
    <label for="star2" title="text">2 stars</label> 
 
    <input type="radio" id="star1" name="rate" value="1" /> 
 
    <label for="star1" title="text">1 star</label> 
 
</div>

只有最后一个div工作正常。

Answer 1

如果您在所有单选按钮上都有相同的“名称”标签，即使它们位于2个不同的div中，它们也只会被视为一组单选按钮。

而且，它是不好的做法，对内容重复的ID

有它固定的，你应该有你的HTML这样https://jsfiddle.net/cornelraiu/70sk3ft6/1/：

<div class="rate"> 
    <input type="radio" name="rate" value="5" /> 
    <label title="text">5 stars</label> 
    <input type="radio" name="rate" value="4" checked/>      
    <label title="text">4 stars</label>         
    <input type="radio" name="rate" value="3" /> 
    <label title="text">3 stars</label>         
    <input type="radio" name="rate" value="2" />       
    <label title="text">2 stars</label>         
    <input type="radio" name="rate" value="1" />       
    <label title="text">1 star</label> 
</div> 

<div class="rate"> 
    <input type="radio" name="rate1" value="5" checked/> 
    <label title="text">5 stars</label> 
    <input type="radio" name="rate1" value="4" />      
    <label title="text">4 stars</label>         
    <input type="radio" name="rate1" value="3" /> 
    <label title="text">3 stars</label>         
    <input type="radio" name="rate1" value="2" />       
    <label title="text">2 stars</label>         
    <input type="radio" name="rate1" value="1" />       
    <label title="text">1 star</label> 
</div> 

Answer 2

你有两个问题：

1. 重复的Ids。 Ids必须是独一无二的。
2. 您的评级群体具有相同的名称。每个组应该有一个明确的名称

修复一个所有的作品。

.rate { 
 
    float: left; 
 
    /*pointer-events: none;*/ 
 
} 
 

 
.rate:not(:checked) > input { 
 
    position: absolute; 
 
    top: -9999px; 
 
} 
 

 
.rate:not(:checked) > label { 
 
    float: right; 
 
    width: 1em; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
    color: #ccc; 
 
} 
 

 
.rate:not(:checked) > label:before { content: '★ '; } 
 

 
.rate > input:checked ~ label { color: #ffc700; } 
 

 
.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label { color: #deb217; } 
 

 
.rate > input:checked + label:hover, .rate > input:checked + label:hover ~ label, .rate > input:checked ~ label:hover, .rate > input:checked ~ label:hover ~ label, .rate > label:hover ~ input:checked ~ label { color: #c59b08; }

<div class="rate"> 
 
    <input type="radio" id="v1_star5" name="rate1" value="5" /> 
 
    <label for="v1_star5" title="text">5 stars</label> 
 
    <input type="radio" id="v1_star4" name="rate1" value="4" checked/>      
 
    <label for="v1_star4" title="text">4 stars</label>         
 
    <input type="radio" id="v1_star3" name="rate1" value="3" /> 
 
    <label for="v1_star3" title="text">3 stars</label>         
 
    <input type="radio" id="v1_star2" name="rate1" value="2" />       
 
    <label for="v1_star2" title="text">2 stars</label>         
 
    <input type="radio" id="v1_star1" name="rate1" value="1" />       
 
    <label for="v1_star1" title="text">1 star</label> 
 
    </div> 
 

 
    <div class="rate"> 
 
    <input type="radio" id="v2_star5" name="rate2" value="5" checked/> 
 
    <label for="v2_star5" title="text">5 stars</label> 
 
    <input type="radio" id="v2_star4" name="rate2" value="4" />      
 
    <label for="v2_star4" title="text">4 stars</label>         
 
    <input type="radio" id="v2_star3" name="rate2" value="3" /> 
 
    <label for="v2_star3" title="text">3 stars</label>         
 
    <input type="radio" id="v2_star2" name="rate2" value="2" />       
 
    <label for="v2_star2" title="text">2 stars</label>         
 
    <input type="radio" id="v2_star1" name="rate2" value="1" />       
 
    <label for="v2_star1" title="text">1 star</label> 
 
    </div>

我已经删除了pointer-events风格，所以你可以看到完整的最终结果。