My .css for a rating function has some issue

I tried to make a rating function. I used style referencing from https://gist.github.com/blairanderson/7f9d1c08345c6573e09edaa1f7316fa1 to draw stars.

my view part is

<div class="rate">
        <input type="radio" id="star5" name="rating" value="5" <?php echo ($postData['average_rating'] >= 5)?'checked="checked"':''; ?>>
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" <?php echo ($postData['average_rating'] >= 4)?'checked="checked"':''; ?>>
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" <?php echo ($postData['average_rating'] >= 3)?'checked="checked"':''; ?>>
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" <?php echo ($postData['average_rating'] >= 2)?'checked="checked"':''; ?>>
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" <?php echo ($postData['average_rating'] >= 1)?'checked="checked"':''; ?>>
        <label for="star1"></label>
</div>

my style part is

<style>
.rate {
    float:left;
}

.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rate:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}

.rate:not(:checked) > label:before {
    content: '★ ';
}

.rate > input:checked ~ label {
    color: #f70;
}

.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: gold;
}

.rate > input:checked ~ label:hover,
.rate > label:hover ~ input:checked ~ label {
    color: gold;
}

.rate > label:active {
    position:relative;
    top:2px;
    left:2px;
}
</style>

I've checked my jquery, and it's good. From the inspector, I can see that all input are checked , but there is only the first star shown as the screenshot shows. I don't know why.

Moreover, I must put style part in this file to let it work. I'm sure the other style parts in mystyle.css works well. I also don't know why.