Html 点击提交而不使用JavaScript的星级评级系统？

我正在实施一个明星评级系统，但它正在测试我所知道的CSS选择器的局限性

现在我有了它，所以每个星星都是一个提交按钮，当你把鼠标悬停在上面时，它会高亮显示。目前的问题是，我不知道如何改变前几颗星的视觉效果（因此，当你在第三颗星上悬停时，它也会突出显示前两颗星）

以下是当前的实施情况：

HTML:

---

由于我要修改的元素在表单中有好几层，似乎我不能使用同级选择器。我是缺少了什么，还是需要JavaScript来实现这一效果？

是的，这是可能的，但与您尝试的方式不同。您缺少的主要一点是您可以使用type=submit的元素上的name属性。为了使其按预期工作，我们还需要在HTML中以相反的顺序使用星号，以便同级运算符能够正确工作

表单{
宽度：100px；
}
钮扣{
边界：0；
背景：透明；
字号：1.5em；
保证金：0；
填充：0；
浮动：对；
}
按钮：悬停，
按钮：悬停+按钮，
按钮：悬停+按钮+按钮，
按钮：悬停+按钮+按钮+按钮，
按钮：悬停+按钮+按钮+按钮+按钮{
颜色：#faa；
}

★
★
★
★
★

是的，这是可能的，但与您尝试的方式不同。您缺少的主要内容是，您可以在type=submit的元素上使用name属性。为了使这项工作如期进行，我们还需要在HTML中以相反的顺序使用星号，以便同级运算符能够正确工作

表单{
宽度：100px；
}
钮扣{
边界：0；
背景：透明；
字号：1.5em；
保证金：0；
填充：0；
浮动：对；
}
按钮：悬停，
按钮：悬停+按钮，
按钮：悬停+按钮+按钮，
按钮：悬停+按钮+按钮+按钮，
按钮：悬停+按钮+按钮+按钮+按钮{
颜色：#faa；
}

★
★
★
★
★

谢谢！！！这非常有效。我使用了

display:flex；flex-flow:row-reverse；justify-content:flex-end；

来获得预期的顺序效果（尽管在html中是反向的）。谢谢！！！这非常有效。我使用了

display:flex；flex-flow:row-reverse；justify-content:flex-end；

来获得预期的顺序效果（尽管在html中是反向的）。

<div class="ratings>
  <form action="/blog/rate" class="ratings-form" method="post">
    <input id="rating_rating" name="rating[rating]" type="hidden" value="1">
    <input id="rating_post_id" name="rating[post_id]" type="hidden" value="3">
    <div id="rating-1" class="rating-star true"><input type="submit" value="★"></div>
  </form>
  <form action="/blog/rate" class="ratings-form" method="post">
    <input id="rating_rating" name="rating[rating]" type="hidden" value="2">
    ... (continued through 5) ...
</div>

.rating-star > input[type="submit"] {
  padding: 0px 2px;
  float: left;
  color: #ccc;
  background: transparent;
  border:0 none;
  border-radius: 50px;
}

.rating-star > input[type="submit"]:hover {
  color: #faa;
}