[css] CSS3 : 검사되지 않은 의사 클래스

나는 당신이 일을 지나치게 복잡하게하려는 것 같아요. 간단한 해결책은 기본적으로 체크되지 않은 스타일로 체크 박스의 스타일을 지정한 다음 체크 된 상태 스타일을 추가하는 것입니다.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

나는 오래된 스레드를 불러 온 것에 대해 사과했지만 더 나은 답변을 사용할 수 있다고 생각했습니다.

수정 (2016 년 3 월 3 일) :

W3C 사양 :not(:checked)은 체크되지 않은 상태를 선택하는 예를 들어 설명합니다. 그러나 이것은 명시 적으로 선택되지 않은 상태이며 이러한 스타일은 선택되지 않은 상태에만 적용됩니다. 이것은 체크되지 않은 상태에서만 필요하고 input[type="checkbox"]선택기에서 사용되는 경우 체크 된 상태에서 제거되어야하는 스타일을 추가하는 데 유용합니다 . 자세한 내용은 아래 예를 참조하십시오.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

:not(:checked)위의 예제에서 사용하지 않았다면 :checked선택자는 border: none;동일한 효과를 얻기 위해 a 를 사용해야했습니다 .

input[type="checkbox"]중복을 줄이려면 for 기본 스타일을 사용하십시오 .

input[type="checkbox"]:not(:checked)선택 상태에 적용하지 않으려는 명시 적 선택 취소 스타일 에는 을 사용하십시오 .

답변