html - 在这种情况下如何将这两个评级栏分开 css php html？

Question

查看代码并运行它，我在同一个页面中有两个评分栏。如您所见，第二个条形图评级与第一个条形图混淆，我如何将它们分开。我曾尝试分配不同的 ID，并尝试不同的类，但也失败了。我能做些什么？欣赏。

.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;
	padding:0 .1em 0 0;
	border-left:.1em solid #fff;/* make space between content*/
	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;	
}

#rating_1 > input:checked ~ label:before {
	content:'\00a0 \00a0 \00a0 ';
	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;
	padding:0 .1em 0 0;
	border-left:.1em solid #fff;/* make space between content*/
	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;	
}

#diet_voting #rating_2 > input:checked ~ label:before {
	content:'\00a0 \00a0 \00a0 ';
	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">		
		<fieldset class="rating" id="rating_1">
		    <legend>Effective:</legend>
		    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
		    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
		    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
		    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
		    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
		</fieldset>	  
		</div>

	<div class="user_voting" id="diet_voting">
		<fieldset class="rating" id="rating_2">
		    <legend>Effective:</legend>
		    <input type="radio" id="star5_2" name="rating_2" value="5" /><label for="star5" title="Rocks!">5 stars</label>
		    <input type="radio" id="star4_2" name="rating_2" value="4" /><label for="star4" title="Pretty good">4 stars</label>
		    <input type="radio" id="star3_2" name="rating_2" value="3" /><label for="star3" title="Meh">3 stars</label>
		    <input type="radio" id="star2_2" name="rating_2" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
		    <input type="radio" id="star1_2" name="rating_2" value="1" /><label for="star1" title="Sucks big time">1 star</label>
		</fieldset>
      </div>

Answer 1

.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;
	padding:0 .1em 0 0;
	border-left:.1em solid #fff;/* make space between content*/
	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;	
}

#rating_1 > input:checked ~ label:before {
	content:'\00a0 \00a0 \00a0 ';
	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;
	padding:0 .1em 0 0;
	border-left:.1em solid #fff;/* make space between content*/
	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;	
}

#diet_voting #rating_2 > input:checked ~ label:before {
	content:'\00a0 \00a0 \00a0 ';
	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">		
		<fieldset class="rating" id="rating_1">
		    <legend>Effective:</legend>
		    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
		    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
		    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
		    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
		    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
		</fieldset>	  
		</div>

	<div class="user_voting" id="diet_voting">
		<fieldset class="rating" id="rating_2">
		    <legend>Effective:</legend>
		    <input type="radio" id="star5_2" name="rating_2" value="5" /><label for="star5_2" title="Rocks!">5 stars</label>
		    <input type="radio" id="star4_2" name="rating_2" value="4" /><label for="star4_2" title="Pretty good">4 stars</label>
		    <input type="radio" id="star3_2" name="rating_2" value="3" /><label for="star3_2" title="Meh">3 stars</label>
		    <input type="radio" id="star2_2" name="rating_2" value="2" /><label for="star2_2" title="Kinda bad">2 stars</label>
		    <input type="radio" id="star1_2" name="rating_2" value="1" /><label for="star1_2" title="Sucks big time">1 star</label>
		</fieldset>
      </div>