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

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