CSS "ve" ve "veya"

114

Oldukça büyük bir sorunum var, çünkü bazı girdi türlerini şekillendirmekten afallatmam gerekiyor. Bende şöyle bir şey vardı:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Ama ben de onay kutularına stil vermek istemiyorum.

Denedim:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Nasıl kullanılır &&? Ve ||yakında kullanmam gerekecek ve bence bu kullanım aynı olacak.

Güncelleme:
Hala nasıl kullanacağımı ||ve &&doğru bir şekilde bilmiyorum . W3 belgelerinde hiçbir şey bulamadım.

css css-selectors conditional-operator

— Misiur
kaynak

17

"anathematise" Yikes. Onay kutularını kutsal intikamla biçimlendirmeye çalışan insanları tehdit mi etmek istiyorsunuz? (Muhtemelen "muaf" veya benzerini kastettiniz, ör. "Bazı girdi türlerini bir stil kuralından muaf tutmam gerekiyor."

— TJ Crowder 9:10

3

— Öbek

4

Sanırım @TJ Crowder muhtemelen bunu anladı. Ama oldu ... komik onun yazım hatası 'ilahi' özellikle ironi D =

— David yeniden aktifleştirme Monica diyor

Yine de harika ngram . ; ^)

— 2016

141

&& şu şekilde birden çok seçiciyi bir araya dizerek çalışır:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Başka bir örnek:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| birden çok seçiciyi virgülle ayırarak çalışır:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

— Geofflee
kaynak

1

Tamam, ışık için teşekkürler. Şekillendirme formlarından nefret ediyorum ama bu benim görevim ve site benim değil. Girişlere sınıfları uygulayacağım.

— Misiur

5

İşte Internet Explorer'ın neyi desteklediğini gösteren yararlı bir tablo: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors

— geofflee

12

IE'yi şimdi kim kullanıyor :)

— Tarun

2

notIE9'dan itibaren çalışıyor gibi görünüyor (@geofflee tarafından sağlanan grafik sayesinde).

— SharpC

1

2018'de IE'nin eski sürümlerini desteklemekle gerçekten ilgileniyor muyuz? Microsoft bile yapmıyor.

— Anomali

48

VE ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

VEYA ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

— kennytm
kaynak

Hayır, başarısız da ol. 1'e 2 ve 1'e 2'ye uygulanacak

— Misiur

@KennyTM: Bakın. Virgül kullanmak şu şekilde bir şey yapacaktır: .registration_form_right input: not ([type = "radio"]), onay kutusu dahil her şeye ve .registration_form_right input: not ([type = "checkbox"]), aşağıdakiler dahil her şeye uygulanır: radyo

— Misiur

@Misiur: Elbette. İkincisi, "VEYA" (aka ||) durumu içindir. Açıklığa kavuşturmak için güncellendi.

— kennytm

1

@KennyTM: Misiur'un söylemeye çalıştığı şey… Sizin "||" örnek sözdizimsel olarak doğrudur, ancak ifadeyi basitleştirirseniz, sadece ".registration_form_right input" olur çünkü iki seçicinin birleşimi tüm girdileri içerir.

— geofflee

@geo, @Mis: bak, sorulan soru "yakında || kullanmam gerekecek", yani bu ||örneklerden a oluşturmanın bir yolu . Tabii ki olur .registration_form_right inputbasitleştirme sonra ama özü kullandığınız ,olarak|| . input:not([type="radio"]), input:not([name="foo"])Önemsiz bir örnek için kullanabilirsiniz .

— kennytm

16

Bir öğenin aVE özelliklerini seçmek için :bX

X[a][b]

Bir elemanın aVEYA özelliklerini seçmek için :bX

X[a],X[b]

— Waao
kaynak

4

:notSözde sınıf IE tarafından desteklenmez. Bunun yerine bunun gibi bir şey alırdım:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Orada bazı kopyalar, ancak daha yüksek uyumluluk için ödenmesi gereken küçük bir bedel.

— Max Shawabkeh
kaynak

2

"VEYA" davranışını bir şekilde & kullanarak ve: değil kullanarak yeniden oluşturabilirsiniz.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

— Serge Profafilecebook
kaynak

2

Maalesef: not (: not) geçerli bir CSS sözdizimi değil. Yine de jQuery ile çalışır.

— Serge Profafilecebook

1

Sanırım daha fazla seçici yazmaktan ve onları virgülle bölmekten nefret ediyorsun?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

ve BTW bu

not([type="radio" && type="checkbox"])

bana daha çok "bu türlerin ikisine birden sahip olmayan girdi" gibi görünüyor :)

— Jaroslav Záruba
kaynak

2

Bu ilk seçici olmayan tüm seçmek çünkü, iş olmaz radio, (ama olur seçmek checkbox) ve ikinci tersini yapardı. İkisinin birliği hem checkbox ve hem de içerir radio.

— Eric

Bu ilk örnek, onları birlikte & & amp; & amp; & amp; içermez, ilk seçici için radyo olmayan girişler için VE onay kutusu olmayan girişler için ateşlenecektir, yani tüm girişler :-)

— Dan F

Yanılıyorsun. Daha sonra, ilki ikinciye ve ikincisi ilkine uygulanacaktır.

— Misiur

1

Benim gibi sıkışan biri olursa diye. Gönderi ve bazı isabet ve denemelere gittikten sonra bu benim için çalıştı.

input:not([type="checkbox"])input:not([type="radio"])

— Aurish
kaynak

1

Uyarı kelimesi. Birkaçını bir araya getirmeknot seçiciyi bir , ortaya çıkan seçicinin özgüllüğünü artırır, bu da geçersiz kılmayı zorlaştırır: Temel olarak seçiciyi tüm notlarla bulmanız ve yeni seçicinize kopyalayıp yapıştırmanız gerekir.

Bir not(X or Y)seçici, özgüllüğü şişirmekten kaçınmak için harika olurdu, ancak sanırım bu cevapta olduğu gibi karşıtları birleştirmeye devam etmemiz gerekecek .

— Andrius R.
kaynak