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

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

---

공식 CSS3 :checked의사 클래스 가 있다는 것을 알고 있지만 :unchecked의사 클래스가 있으며 동일한 브라우저 지원이 있습니까?

Sitepoint의 참조 에는 하나가 언급되어 있지 않지만이 whatwg 사양 (그것이 무엇이든)이 수행합니다.

:checked와 :not()의사 클래스가 결합 될 때 동일한 결과를 얻을 수 있다는 것을 알고 있지만 여전히 궁금합니다.

input[type="checkbox"]:not(:checked) {
    /* styles */
}

편집하다:

w3c는 동일한 기술을 권장합니다.

선택되지 않은 체크 박스는 부정 의사 클래스를 사용하여 선택할 수 있습니다.

:not(:checked)

---

:unchecked 선택기 또는 CSS UI 레벨 3 사양에 정의되어 있지 않으며 선택기의 레벨 4에도 나타나지 않았습니다.

사실, W3C의 인용문 은 Selectors 4 spec에서 가져온 것입니다 . 선택기 4 는 사용을 권장 하므로 :not(:checked)해당 :unchecked의사 가 없다고 가정하는 것이 안전합니다 . :not()및 :checked에 대한 브라우저 지원 은 동일하므로 문제가되지 않습니다.

이것은과 일치하지 보일 수 :enabled및 :disabled요소가 될 수있다, 특히 이후 상태 둘 다 활성화되지 않고 (즉, 의미가 완전히 적용되지 않습니다) 장애인 그러나이 불일치에 대한 설명이있을 나타나지 않습니다.

( :indeterminate의미가 적용되지 않기 때문에 요소가 유사하게 선택 해제되거나 확인되거나 결정되지 않을 수 있기 때문에 계산되지 않습니다.)

---

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

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 를 사용해야했습니다 .

Use the input[type="checkbox"] for base styling to reduce duplication.

Use the input[type="checkbox"]:not(:checked) for explicit unchecked styles that you do not want to apply to the checked state.

---

There is no :unchecked pseudo class however if you use the :checked pseudo class and the sibling selector you can differentiate between both states. I believe all of the latest browsers support the :checked pseudo class, you can find more info from this resource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Your going to get better browser support with jquery... you can use a click function to detect when the click happens and if its checked or not, then you can add a class or remove a class as necessary...

---

The way I handled this was switching the className of a label based on a condition. This way you only need one label and you can have different classes for different states... Hope that helps!

참고URL : https://stackoverflow.com/questions/8846075/css3-unchecked-pseudo-class