為什么我的注意力不能正常工作它只適用於活躍？

Question

我有一個 css，當我在寫：

.rate:not(:checked) > label:active,
.rate:not(:checked) > label:active ~ label {
    color: red;
}

它工作正常，但對於這段代碼它不起作用：

.rate:not(:checked) > label:focus,
    .rate:not(:checked) > label:focus ~ label {
        color: black;
    }

HTML 代碼：

 <div class="rate p-0">
     <input type="radio" id="star5" name="rate" value="5" />
     <label for="star5" title="text">5 stars</label>
     <input type="radio" id="star4" name="rate" value="4" />
     <label for="star4" title="text">4 stars</label>
     <input type="radio" id="star3" name="rate" value="3" />
     <label for="star3" title="text">3 stars</label>
     <input type="radio" id="star2" name="rate" value="2" />
     <label for="star2" title="text">2 stars</label>
     <input type="radio" id="star1" name="rate" value="1" />
     <label for="star1" title="text">1 star</label>
 </div>

Answer 1

嘗試這個

 input[type="radio"]:focus+label { color: red; } input[type="radio"]:checked+label { color: red; }

 <div class="rate p-0"> <input type="radio" id="star5" name="rate" value="5" /> <label for="star5" title="text">5 stars</label> <input type="radio" id="star4" name="rate" value="4" /> <label for="star4" title="text">4 stars</label> <input type="radio" id="star3" name="rate" value="3" /> <label for="star3" title="text">3 stars</label> <input type="radio" id="star2" name="rate" value="2" /> <label for="star2" title="text">2 stars</label> <input type="radio" id="star1" name="rate" value="1" /> <label for="star1" title="text">1 star</label> </div>

Answer 2

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

它的單選按鈕僅適用於活動單選按鈕焦點有關更多詳細信息，請閱讀上面的鏈接。