html - 星级评分系统第二个选项用 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 名称解决了这个问题