基于复选框的星级评定系统标签突出显示

Question

我有一个通过复选框（隐藏）构建的星级评分系统。

评级系统将“不适用”作为第一选择。

现在，选择标签时，我可以将N / A或“禁止停车”显示为红色。

但是当我选择其他星星时，我无法更改此N / A的颜色。 因为当我给一颗星或3.5颗星评级时，红色也会突出显示，这是以前的CSS机制的一部分，我刚刚将第一颗星更改为N / A选项。

如果我选择N / A，如何保持红色选择，同样，当我选择任何恒星时，我也应该以其他颜色或灰色（未选中）显示N / A，因为它不是星级的一部分，而只是N / A。

.rate {
        display: inline-block;
    }
    .rate>input {
        display: none;
    }
    .rate>label {
        float: right;
        color: #b4b3b3;
    }
    .rate>label:before {
        display: inline-block;
        font-size: 3em;
        padding: .3rem .2rem;
        margin: 0 5px;
        cursor: pointer;
        font-family: FontAwesome;
        content: "\f005 ";
    }
    .rate>label:last-child:before {
        content: "\f05e";
        //color: #cc5858;
        margin-right: 10px;
        padding-right: 20px;
        border-right: .08em solid #4a90e2;
    }
    .rate .half:before {
        content: "\f089 ";
        position: absolute;
        padding-right: 0;
    }
    input:checked~label,
    label:hover,
    label:hover~label {
        color: #ffcd00;
    }
    input:checked+label:hover,
    input:checked~label:hover,
    input:checked~label:hover~label,
    label:hover~input:checked~label {
        color: rgb(255, 224, 85);
    }
    input:checked~label:last-child:before {
        color: #cc5858;
    }
    input:checked+input:last-child:not(:checked)~label:last-child {
        color: #14ff4e !important;
    }

下面的角度代码

<fieldset class="rate" id="rate-{{controlIndex}}" [class.readonly]="readonly">
    <ng-container *ngFor="let star of ratings; let i = index">
        <input type="radio" id="rating-{{ratings.length-i-1}}-{{controlIndex}}" name="rating-{{controlIndex}}" [checked]="(star.id == rating)" />
        <label [class.half]="(i%2)==1" for="rating-{{ratings.length-i-1}}-{{controlIndex}}" (click)="updateRating(star.id)"></label>
    </ng-container> </fieldset>

• 图像仅用于说明目的