CSS „i” i „lub”

114

Mam dość duży problem, ponieważ muszę wykluczyć ze stylizacji niektórych typów danych wejściowych. Miałem coś takiego:

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

Ale nie chcę też stylizować pól wyboru.

Próbowałem:

.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"])

Jak używać &&? Będę musiał użyć ||wkrótce i myślę, że użycie będzie takie samo.

Aktualizacja:
nadal nie wiem, jak używać ||i &&poprawnie. Nie mogłem znaleźć niczego w dokumentach W3.

css css-selectors conditional-operator Misiur
źródło
17
„anathematise” Yikes. Chcesz zagrozić ludziom, którzy próbują stylizować pola wyboru, boską zemstą? (Prawdopodobnie miałeś na myśli „wykluczone” lub podobne, np. „Muszę wyłączyć niektóre typy danych wejściowych z reguły stylizacji”).
TJ Crowder
3
Cóż, nie mogłem znaleźć dobrego tłumaczenia na czasowniki
frazowe
4
Myślę, że @TJ Crowder prawdopodobnie to zrozumiał. Ale to było zabawne ... zwłaszcza ironia jego błędnej pisowni `` boskie '' = D
David mówi, że przywróć Monikę
Ale wielki ngram . ; ^)
ruffin

Odpowiedzi:

141

&& działa poprzez łączenie wielu selektorów w ten sposób:

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

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

Inny przykład:

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

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

|| działa poprzez oddzielenie wielu selektorów przecinkami w ten sam sposób:

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

div.class1,
div.class2
{
  /* foo */
}
geofflee
źródło
1
Ok, dzięki za światło. Nienawidzę stylizacji formularzy, ale to moje zadanie, a strona nie jest moja. Zastosuję klasy do danych wejściowych.
Misiur
5
Oto przydatny wykres tego, co obsługuje Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Kto teraz używa IE :)
Tarun
2
notwydaje się działać od IE9 wzwyż (dzięki wykresowi dostarczonemu przez @geofflee).
SharpC,
1
Czy naprawdę nadal martwimy się obsługą starszych wersji IE w 2018 roku? Nawet Microsoft tego nie robi.
Anomalia
48

AND ( &&):

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

LUB ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
kennytm
źródło
Nie, też nie. Będzie obowiązywać od 1 do 2 i od 2 do 1
Misiur
@KennyTM: Spójrz. Użycie przecinka da coś takiego: .registration_form_right input: not ([type = "radio"]) zastosuje się do wszystkiego, łącznie z polem wyboru, a .registration_form_right input: not ([type = "checkbox"]) zastosuje się do wszystkiego, w tym radio
Misiur
@Misiur: Oczywiście. Drugi jest dla przypadku „LUB” (aka ||). Zaktualizowano w celu wyjaśnienia.
kennytm
1
@KennyTM: Misiur próbuje powiedzieć… Twoje „||” przykład jest poprawny składniowo, ale jeśli uprościsz wyrażenie, stanie się ono po prostu „.registration_form_right input”, ponieważ suma dwóch selektorów obejmuje wszystkie dane wejściowe.
geofflee
@geo, @Mis: spójrz, pytanie zadane „Będę musiał użyć || wkrótce”, więc jest to sposób na skonstruowanie ||przykładu. Oczywiście staje się to .registration_form_right inputpo uproszczeniu, ale istotą jest to, że używasz ,as|| . Możesz użyć input:not([type="radio"]), input:not([name="foo"])nietrywialnego przykładu.
kennytm
16

Aby wybrać właściwości aI bz Xelementu:

X[a][b]

Aby wybrać właściwości alub bz Xelementem:

X[a],X[b]
waao
źródło
4

:notPseudo-klasa nie jest obsługiwane przez IE. Zamiast tego dostałem coś takiego:

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

Trochę tam duplikatów, ale jest to niewielka cena za wyższą kompatybilność.

Max Shawabkeh
źródło
2

Możesz w jakiś sposób odtworzyć zachowanie „LUB” używając & i: nie.

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
źródło
2
Przepraszamy,: not (: not) nie jest prawidłową składnią CSS. Działa jednak z jQuery.
Serge Profafilecebook
1

Chyba nie lubisz pisać więcej selektorów i dzielić je przecinkami?

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

a przy okazji to 

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

wygląda mi bardziej na „wejście, które nie ma obu tych typów” :)

Jaroslav Záruba
źródło
2
To nie będzie działać, ponieważ pierwszy selektor wybierze wszystkie nie- radio(ale byłoby wybrać checkbox), a drugi zrobi odwrotnie. Związek tych dwóch będzie zawierał zarówno checkbox i radio .
Eric
Ten pierwszy przykład nie będzie && ich razem, będzie uruchamiany dla wejść, które nie są radiami dla pierwszego selektora, ORAZ wejść, które nie są polami wyboru, co oznacza wszystkie wejścia :-)
Dan F
Jesteś w błędzie. Następnie pierwsza będzie miała zastosowanie do drugiej, a druga do pierwszej.
Misiur
1

Na wszelki wypadek, gdyby ktoś utknął jak ja. Po przejściu przez post i kilka prób i testów zadziałało to dla mnie.

input:not([type="checkbox"])input:not([type="radio"])
Aurish
źródło
1

Słowo ostrzeżenia. Łączenie ze sobą kilku notselektorów zwiększa specyficzność wynikowego selektora, co utrudnia jego przesłonięcie: po prostu musisz znaleźć selektor ze wszystkimi niewiadomymi i skopiować go i wkleić do nowego selektora.

not(X or Y)Selektor byłoby wspaniale, aby uniknąć pompowania specyfikę, ale myślę, że musimy trzymać się łączenie przeciwieństw, jak w tej odpowiedzi .

Andrius R.
źródło