CSS3: denetlenmemiş sözde sınıf

Resmi bir CSS3 :checkedsözde sınıfı olduğunu biliyorum , ancak :uncheckedsözde sınıf var mı ve aynı tarayıcı desteğine sahipler mi?

Site noktasının referansı bir taneden bahsetmez, ancak bu whatwg spesifikasyonu (her ne ise) yapar.

Aynı sonucun :checkedve :not()sözde sınıflar birleştirildiğinde elde edilebileceğini biliyorum , ancak yine de merak ediyorum:

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

Düzenle:

W3c aynı tekniği tavsiye ediyor

Olumsuzluk sözde sınıfı kullanılarak işaretlenmemiş bir onay kutusu seçilebilir:

:not(:checked)

:unchecked Seçicilerde veya CSS UI düzey 3 özelliklerinde tanımlanmamıştır ve Seçiciler'in 4. düzeyinde görünmemiştir.

Aslında, W3C'den alıntı Selectors 4 spesifikasyonundan alınmıştır . Yana Seçiciler 4 kullanılmasını önerir :not(:checked), hiç karşılık gelen olmadığını kabul edebiliriz :uncheckedsözde. Tarayıcı desteği :not()ve :checkedaynıdır, bu nedenle bu bir sorun olmamalıdır.

Bu tutarsız görünebilir :enabledve :disabledbir eleman olabilir, özellikle de devletler ne etkin ne de (yani semantik tamamen geçerli değildir) devre dışı, ancak bu tutarsızlığın herhangi bir açıklaması vardır görünmüyor.

( :indeterminatesayılmaz, çünkü bir öğe benzer şekilde ne kontrol edilmemiş, ne kontrol edilmiş ne de belirsiz olabilir çünkü anlambilim geçerli değildir.)

Sanırım işleri fazla karmaşıklaştırmaya çalışıyorsun. Basit bir çözüm, onay kutunuzu varsayılan olarak işaretlenmemiş stillerle biçimlendirmek ve ardından işaretli durum stillerini eklemektir.

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

Eski bir konuyu açtığım için özür dilerim ama bunun daha iyi bir cevap verebileceğini hissettim.

DÜZENLE (3/3/2016):

W3C Specs :not(:checked), kontrol edilmemiş durumu seçme örneği olarak bunu belirtir . Ancak, bu açıkça kontrol edilmemiş durumdur ve bu stilleri yalnızca kontrol edilmemiş duruma uygular. Bu, yalnızca işaretlenmemiş durumda gerekli olan ve input[type="checkbox"]seçici üzerinde kullanıldığında işaretli durumdan kaldırılması gereken stil eklemek için kullanışlıdır . Açıklama için aşağıdaki örneğe bakın.

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)Yukarıdaki örnekte kullanılmasa , :checkedseçicinin border: none;aynı etkiyi elde etmek için a kullanması gerekirdi .

input[type="checkbox"]Çoğaltmayı azaltmak için temel stil için kullanın .

input[type="checkbox"]:not(:checked)İşaretli duruma uygulamak istemediğiniz açıkça işaretlenmemiş stiller için kullanın .

No: unchecked sözde sınıfı yoktur, ancak: checked sözde sınıfı ve kardeş seçiciyi kullanırsanız, her iki durum arasında ayrım yapabilirsiniz. En son tarayıcıların hepsinin: işaretli sözde sınıfı desteklediğine inanıyorum, bu kaynaktan daha fazla bilgi bulabilirsiniz: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Jquery ile daha iyi tarayıcı desteği alacaksınız ... tıklamanın ne zaman gerçekleştiğini algılamak için bir tıklama işlevi kullanabilir ve işaretli olup olmadığını, gerektiğinde bir sınıf ekleyebilir veya bir sınıfı kaldırabilirsiniz ...

Bunu ele alma şeklim, bir koşul temelinde bir etiketin className'ini değiştirmekti. Bu şekilde sadece bir etikete ihtiyacınız var ve farklı eyaletler için farklı sınıflara sahip olabilirsiniz ... Umarım yardımcı olur!