Html 如何确保一个无线电表单不检查另一个无线电表单

我发现了一个纯粹的CSS星级评分系统，但是对于给定的代码，我每页只能使用一个星级系统。我尝试过更改类名，但不幸的是，第二个星级评定表在按下时会检查第一个星级评定表。这有什么办法吗

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

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

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

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

/***** CSS Magic to Highlight Stars on Hover *****/

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

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

HTML

你是说像这样吗


.ratings{
边界：无；
浮动：左；
}
.ratings>输入{显示：无；}
.ratings>标签：在{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.ratings>.half:在{
内容：“\f089”；
位置：绝对位置；
}
.ratings>标签{
颜色：#ddd；
浮动：对；
}
/*****CSS魔术突出悬停上的星星*****/
.ratings>输入：选中~label，/*单击时显示金星*/
.评级：未（：选中）>标签：悬停，/*悬停当前星*/
.ratings:not（：checked）>label:hover~label{color:#FFD700；}/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，/*更改评级时悬停当前星号*/
.评级>输入：选中~标签：悬停，
.ratings>标签：悬停~输入：选中~标签，/*点亮当前选择*/
.ratings>输入：选中~label:hover~label{color:#FFED85；}
.ratingtwo{
边界：无；
浮动：左；
}
.ratingtwo>输入{显示：无；}
.ratingtwo>标签：在{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.ratingtwo>.half:在{
内容：“\f089”；
位置：绝对位置；
}
.ratingtwo>标签{
颜色：#ddd；
浮动：对；
}
/*****CSS魔术突出悬停上的星星*****/
.ratingtwo>输入：选中~label，/*单击时显示金星*/
.ratingtwo:未（：选中）>标签：悬停，/*悬停当前星号*/
.ratingtwo:not（：checked）>label:hover~label{color:#FFD700；}/*悬停列表中的前几颗星*/
.RatingsWO>输入：选中+标签：悬停，/*更改额定值时悬停当前星号*/
.ratingstwo>输入：选中~标签：悬停，
.ratingtwo>标签：悬停~输入：选中~标签，/*点亮当前选择*/
.ratingtwo>input:checked~label:hover~label{color:#FFED85；}

你所有的CSS选择器都参考了
评级
，但是你的元素都没有这样的等级对不起，这是一个错误奇怪的是，我也这么做了，但它不起作用。谢谢我想我需要用SASS来保持干燥它不起作用？真正地我在JSFIDLE中进行了测试，它也可以工作。
<form class="form-class" id="starform">               
   <fieldset class="rating">
         <input type="radio" id="star2" name="rating" value="2"/>
         <label class="full" for="star2" title="2 stars"></label>

         <input type="radio" id="star1" name="rating" value="1"/> 
         <label class="full" for="star1" title="1 star"></label>
   </fieldset>
</form>

<form class="form-class" id="starformtwo">               
       <fieldset class="ratingtwo">
             <input type="radio" id="star2-2" name="ratingtwo" value="2"/>
             <label class="full" for="star2-2" title="2 stars"></label>

             <input type="radio" id="star1-2" name="ratingtwo" value="1"/> 
             <label class="full" for="star1-2" title="1 star"></label>
       </fieldset>
    </form>