星級評分系統第二個選項用CSS更改第一個選項

Question

我有一個用html和css製作的星級系統。

我的問題是，當我改變第二個系統的評分時，第一個系統也會改變。我試圖使用不同的類名，但顯然我錯過了一些東西。有什麼建議麼？

HTML

<div style="padding-top:20px;" class="row"> 
    <div style="border-right: solid #4a98b5; width:290px;" class="col- 
md-4"><p>Product Matches description</p></div> 
    <div style="font-size:20px;color:#FFD700" class="col-md-4"> 
    <fieldset class="rating1"> 
    <input type="radio" id="star5" name="rating1" value="5" /><label class = "full" for="star5" ></label> 
    <input type="radio" id="star4half" name="rating1" value="4.5" /><label class="half" for="star4half"></label> 
    <input type="radio" id="star4" name="rating1" value="4" /><label class = "full" for="star4"></label> 
    <input type="radio" id="star3half" name="rating1" value="3.5" /><label class="half" for="star3half"></label> 
    <input type="radio" id="star3" name="rating1" value="3" /><label class = "full" for="star3"></label> 
    <input type="radio" id="star2half" name="rating1" value="2.5" /><label class="half" for="star2half"></label> 
    <input type="radio" id="star2" name="rating1" value="2" /><label class = "full" for="star2"></label> 
    <input type="radio" id="star1half" name="rating1" value="1.5" /><label class="half" for="star1half"></label> 
    <input type="radio" id="star1" name="rating1" value="1" /><label class = "full" for="star1"></label> 
    <input type="radio" id="starhalf" name="rating1" value="0.5" /><label class="half" for="starhalf"></label> 
</fieldset> 
</div> 
</div> 

<div style="padding-top:20px;" class="row"> 
<div style="border-right: solid #4a98b5; width:290px;" class="col- 
md-4"><p>Rate your experience</p></div> 
<div style="font-size:20px;color:#FFD700" class="col-md-4"> 
<fieldset class="rating2"> 
    <input type="radio" id="star5" name="rating2" value="5" /><label class = "full" for="star5" ></label> 
    <input type="radio" id="star4half" name="rating2" value="4.5" /><label class="half" for="star4half"></label> 
    <input type="radio" id="star4" name="rating2" value="4" /><label class = "full" for="star4"></label> 
    <input type="radio" id="star3half" name="rating2" value="3.5" /><label class="half" for="star3half"></label> 
    <input type="radio" id="star3" name="rating2" value="3" /><label class = "full" for="star3"></label> 
    <input type="radio" id="star2half" name="rating2" value="2.5" /><label class="half" for="star2half"></label> 
    <input type="radio" id="star2" name="rating2" value="2" /><label class = "full" for="star2"></label> 
    <input type="radio" id="star1half" name="rating2" value="1.5" /><label class="half" for="star1half"></label> 
    <input type="radio" id="star1" name="rating2" value="1" /><label class = "full" for="star1"></label> 
    <input type="radio" id="starhalf" name="rating2" value="0.5" /><label class="half" for="starhalf"></label> 
</fieldset> 
</div> 

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 

.rating1 { 
border: none; 
float: left; 
} 

.rating1 > input { display: none; } 
.rating1 > label:before { 
    margin: 5px; 
    font-size: 1.25em; 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f005"; 
} 

.rating1 > .half:before { 
    content: "\f089"; 
    position: absolute; 
} 

.rating1 > label { 
    color: #ddd; 
float: right; 
} 


.rating1 > input:checked ~ label, /* show gold star when clicked */ 
.rating1:not(:checked) > label:hover, /* hover current star */ 
.rating1:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 

.rating1 > input:checked + label:hover, /* hover current star when 
changing rating */ 
.rating1 > input:checked ~ label:hover, 
.rating1 > label:hover ~ input:checked ~ label, /* lighten current 
selection */ 
.rating1 > input:checked ~ label:hover ~ label { color: #FFED85; } 

.rating2 { 
    border: none; 
    float: left; 
} 

.rating2 > input { display: none; } 
.rating2 > label:before { 
    margin: 5px; 
    font-size: 1.25em; 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f005"; 
} 

.rating2 > .half:before { 
    content: "\f089"; 
    position: absolute; 
} 

.rating2 > label { 
    color: #ddd; 
    float: right; 
} 


.rating2 > input:checked ~ label, /* show gold star when clicked */ 
.rating2:not(:checked) > label:hover, /* hover current star */ 
.rating2:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 

.rating2 > input:checked + label:hover, /* hover current star when changing rating */ 
.rating2 > input:checked ~ label:hover, 
.rating2 > label:hover ~ input:checked ~ label, /* lighten current selection */ 
.rating2 > input:checked ~ label:hover ~ label { color: #FFED85; } 

請有代碼看看https://codepen.io/anon/pen/weYbzZ。

Answer 1

問題解決了！

儘管字段集具有不同的類名稱，但輸入字段的名稱相同，因此當第二個輸入字段更改時，它會更改第一個字段。因此輸入字段中不同的id名稱可以解決問題