html - 为什么这是 :checked selector not working?

Question

在下面的例子中，为什么选中的星星和它之前的所有星星都没有保持黄色？

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

.rating {
  display: inline;
  border: none;
}

.rating > label > input {
  margin: 0px;
}

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

.rating > label { 
  color: #ddd;
}

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

<form>
  <fieldset class="rating">
    <label for="radio1"><input id="radio1" type="radio" value="1"></label>
    <label for="radio2"><input id="radio2" type="radio" value="2"></label>
    <label for="radio3"><input id="radio3" type="radio" value="3"></label>
    <input type="submit" value="Submit">
  </fieldset>
</form>

在我的代码中导致问题的代码行是:

/* css */  

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

我不明白为什么选择器没有按预期工作。

请帮忙!

Answer 1

因为您的复选框不是 .rating 的子项，所以您已将其包装在标签中，因此您的代码必须是您需要从标签中取出输入:

<input id="radio1" type="radio" value="1"><label for="radio1"></label>

然后将您的 css 更改为:

.rating > input:checked + label{}