一页上的许多星级只有纯CSS

Question

例如，我一页上只有几部电影。而且我必须能够用纯CSS星给它们评分。选择第二个-重置第一等级后，我拥有的代码只能执行第一等级。 您可以在下面的代码中看到它：

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.card input {
    display: none;
}

.card label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.card label {
    color: #ddd;
    float: right;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    /*float: left;*/
}

fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
    color: #FFD700;
}

fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
    color: #FFED85;
}

<div class="card">
    //...
    <div class="card-header">
        <fieldset class="stars-1">
            <input type="radio" name="stars" id="star-1" value="1">
            <label for="star-1"></label>
            <input type="radio" name="stars" id="star-2" value="2">
            <label for="star-2"></label>
            <input type="radio" name="stars" id="star-3" value="3">
            <label for="star-3"></label>
            <input type="radio" name="stars" id="star-4" value="4">
            <label for="star-4"></label>
            <input type="radio" name="stars" id="star-5" value="5">
            <label for="star-5"></label>
        </fieldset>
        //...
    </div>
</div>

<div class="card">
    //...
    <div class="card-header">
        <fieldset class="stars-2">
            <input type="radio" name="stars" id="star-6" value="1">
            <label for="star-6"></label>
            <input type="radio" name="stars" id="star-7" value="2">
            <label for="star-7"></label>
            <input type="radio" name="stars" id="star-8" value="3">
            <label for="star-8"></label>
            <input type="radio" name="stars" id="star-9" value="4">
            <label for="star-9"></label>
            <input type="radio" name="stars" id="star-10" value="5">
            <label for="star-10"></label>
        </fieldset>
        //...
    </div>
</div>

如何使它们分开工作？ 我将不胜感激。 朋友们，等待您的帮助。

Answer 1

第二组单选按钮必须使用不同的名称。

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.card input {
    display: none;
}

.card label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.card label {
    color: #ddd;
    float: right;
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
    /*float: left;*/
}

fieldset > input:checked ~ label,
fieldset:not(:checked) > label:hover,
fieldset:not(:checked) > label:hover ~ label {
    color: #FFD700;
}

fieldset > input:checked + label:hover,
fieldset > input:checked ~ label:hover,
fieldset > label:hover ~ input:checked ~label,
fieldset > input:checked ~ label:hover ~label {
    color: #FFED85;
}

<div class="card">
    //...
    <div class="card-header">
        <fieldset class="stars-1">
            <input type="radio" name="stars" id="star-1" value="1">
            <label for="star-1"></label>
            <input type="radio" name="stars" id="star-2" value="2">
            <label for="star-2"></label>
            <input type="radio" name="stars" id="star-3" value="3">
            <label for="star-3"></label>
            <input type="radio" name="stars" id="star-4" value="4">
            <label for="star-4"></label>
            <input type="radio" name="stars" id="star-5" value="5">
            <label for="star-5"></label>
        </fieldset>
        //...
    </div>
</div>

<div class="card">
    //...
    <div class="card-header">
        <fieldset class="stars-2">
            <input type="radio" name="stars_1" id="star-6" value="1">
            <label for="star-6"></label>
            <input type="radio" name="stars_1" id="star-7" value="2">
            <label for="star-7"></label>
            <input type="radio" name="stars_1" id="star-8" value="3">
            <label for="star-8"></label>
            <input type="radio" name="stars_1" id="star-9" value="4">
            <label for="star-9"></label>
            <input type="radio" name="stars_1" id="star-10" value="5">
            <label for="star-10"></label>
        </fieldset>
        //...
    </div>
</div>