Css 从子窗口刷新父窗口？

我正在尝试创建一个明星评级系统，我现在只需要关注其中的css部分

当用户用鼠标悬停时，它会填满星星，但它会从右向左移动，我想让它从左向右移动

有人能告诉我做这件事需要做什么改变吗。谢谢

<span class="rating">
    <input type="radio" class="rating-input"
        id="rating-input-1-5" name="rating-input-1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-4" name="rating-input-1">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-3" name="rating-input-1">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-2" name="rating-input-1">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
        id="rating-input-1-1" name="rating-input-1">
    <label for="rating-input-1-1" class="rating-star"></label>
</span>

css:

<
风格>
.评级{
溢出：隐藏；
显示：内联块；
}
.评级输入{
位置：绝对位置；
左：0；
顶部：-50px；
}
.收视率之星{
显示：内联块；
宽度：30px；
高度：30px；
背景：url（'assets/img/icons/stars.png'）0 0px；
背景重复：无重复；
背景尺寸：22px 20px；
}
.收视率之星：悬停{
背景位置：0.16；
背景：url（'assets/img/icons/favorites.png'）0 0px；
背景尺寸：22px 20px；
}
.收视率之星：悬停，
.评级星：悬停~.评级星，
.额定值输入：选中~额定值星形{
背景位置：0；
背景：url（'assets/img/icons/favorites.png'）0 0px；
背景尺寸：22px 20px；
背景重复：无重复；
}

只需颠倒星号顺序（也在您的标记中）：

---

只要颠倒HTML的顺序，5应该在末尾，而不是开头！

<

    style>
    .rating {
        overflow: hidden;
        display: inline-block;
    }
    .rating-input {
        position: absolute;
        left: 0;
        top: -50px;
    }
    .rating-star {
        display:inline-block;
        width: 30px;
        height: 30px;
        background: url('assets/img/icons/stars.png') 0 0px;
        background-repeat:no-repeat;
        background-size: 22px 20px;
    }
    .rating-star:hover {
        background-position: 0 16;
        background: url('assets/img/icons/favorites.png') 0 0px;
        background-size: 22px 20px;
    }
    .rating-star:hover,
    .rating-star:hover ~ .rating-star,
    .rating-input:checked ~ .rating-star {
        background-position: 0 0;
        background: url('assets/img/icons/favorites.png') 0 0px;
        background-size: 22px 20px;
        background-repeat:no-repeat;
    }

    </style>

.rating-star {
  float:right;
  margin-right: 5px; 
}