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{}

Answer 2

一个有效的JSFiddle https://jsfiddle.net/LeoAref/s3btcwjg/

这里我们可以使用Adjacent sibling CSS selector +

.rating input:checked + label,
.rating input:hover + label,
.rating label:hover { color: #FFD700; }

将HTML编辑为：

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

为什么这样：选中的选择器不起作用？

2 个答案: