小编eri*_*tra的帖子

我正在实施星级评分系统，但它正在测试我对 CSS 选择器的了解的极限。

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

这是当前的实现：

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>

CSS：

.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;
}

由于我要修改的元素在表单的深几层，看来我不能使用~兄弟选择器了。我是否遗漏了什么，或者我是否需要 JavaScript 才能使这种效果成为可能？