내 CSS 스타일이 내가 선택한 라디오 버튼 라벨에 적용되지 않는 이유는 무엇입니까?

선택한 라디오 버튼 레이블 스타일 지정: 문제 해결

선택한 라디오 버튼의 레이블 스타일을 지정하려고 하는데 원하는 스타일이 없습니다. 적용이 되지 않습니다. 이유를 조사하고 수정해 보겠습니다.

HTML이 정확하고 제공한 CSS에 라디오 입력 및 해당 레이블 스타일 지정 규칙이 포함되어 있습니다. 문제는 선택된 라디오 버튼의 선택기에 있습니다:

.radio-toolbar label + input[type="radio"]:checked {
    background:pink !important;
}

이 선택기는 display:none을 사용하여 숨겨진 입력 요소를 대상으로 합니다. 라디오 버튼을 선택하면 확인된 속성이 레이블이 아닌 입력에 추가됩니다. 라벨의 스타일을 지정하려면 라벨 요소 자체를 선택해야 합니다.

.radio-toolbar label[for]:checked {
    background: pink !important;
}

여기에서는 [for] 속성 선택기를 사용하여 선택된 라디오 버튼과 연결된 라벨을 선택합니다. 업데이트된 CSS는 예상대로 작동해야 합니다.

레이블이 표시되도록 하려면 표시 속성도 포함해야 합니다.

.radio-toolbar label {
    ...
    display: inline-block;
    ...
}

위 내용은 내 CSS 스타일이 내가 선택한 라디오 버튼 라벨에 적용되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!