0
看代碼並運行它，我在同一頁面上有兩個小節評分。正如你所看到的，第二個酒吧評分與第一個評分相混淆，我該如何區分它們。我試圖分配不同的ID，並嘗試不同的課程，也失敗了。我能做什麼？欣賞。如何在這種情況下分開這兩個評級欄css php html？
.rating {
float:left;
}
.rating:not(:checked) > input {
position:absolute;
left:-9999px;
clip:rect(0,0,0,0);
}
#rating_1:not(:checked) > label {
float:right;
width:9px;
\t padding:0 .1em 0 0;
\t border-left:.1em solid #fff;/* make space between content*/
\t overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:0.9;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
#rating_1:not(:checked) > label:before {
content:'\00a0 \00a0 \00a0 ';
background-color: #c7c5c5;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px; \t
}
#rating_1 > input:checked ~ label:before {
\t content:'\00a0 \00a0 \00a0 ';
\t background-color: #4bce32;
}
#rating_1:not(:checked) :hover ~ label:before {
content:'\00a0 \00a0 \00a0 ';
background-color: #4bce32;
}
/* second rating*/
#diet_voting #rating_2:not(:checked) > label {
float:right;
width:9px;
\t padding:0 .1em 0 0;
\t border-left:.1em solid #fff;/* make space between content*/
\t overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:0.9;
text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
#diet_voting #rating_2:not(:checked) > label:before {
content:'\00a0 \00a0 \00a0 ';
background-color: #c7c5c5;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px; \t
}
#diet_voting #rating_2 > input:checked ~ label:before {
\t content:'\00a0 \00a0 \00a0 ';
\t background-color: #4bce32;
}
#diet_voting #rating_2:not(:checked) :hover ~ label:before {
content:'\00a0 \00a0 \00a0 ';
background-color: #4bce32;
}<div class="user_voting" id="faith_voting"> \t \t
\t \t <fieldset class="rating" id="rating_1">
\t \t <legend>Effective:</legend>
\t \t <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
\t \t <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
\t \t <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
\t \t <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
\t \t <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
\t \t </fieldset> \t
\t \t </div>
\t <div class="user_voting" id="diet_voting">
\t \t <fieldset class="rating" id="rating_2">
\t \t <legend>Effective:</legend>
\t \t <input type="radio" id="star5_2" name="rating_2" value="5" /><label for="star5" title="Rocks!">5 stars</label>
\t \t <input type="radio" id="star4_2" name="rating_2" value="4" /><label for="star4" title="Pretty good">4 stars</label>
\t \t <input type="radio" id="star3_2" name="rating_2" value="3" /><label for="star3" title="Meh">3 stars</label>
\t \t <input type="radio" id="star2_2" name="rating_2" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
\t \t <input type="radio" id="star1_2" name="rating_2" value="1" /><label for="star1" title="Sucks big time">1 star</label>
\t \t </fieldset>
</div>