Jak mogę przesłonić selektor wieloma negacjami (: nie)?

Question

Na przykład na styl standardowych wejść piszę coś takiego:

input:not([type="checkbox"]):not([type="radio"]) { 
    background-color: blue; 
} 

że jednak zwiększa swoistość dużo, więc jeśli chcę, aby zastąpić go przy użyciu klasy muszę zrobić coś takiego:

.red.red.red { 
    background-color: red; 
} 

Czy istnieje sposób na zmniejszenie specyfiki oryginalnego selektora wejścia bez zmiany funkcji?

Answer 1

Niestety w selektorów 3, to najlepsze, co możesz zrobić, ponieważ :not() akceptuje tylko jeden prosty przełącznik. Mimo to selektor w nadrzędnej regule można zastąpić selektorem input.red.red - nie potrzebujesz więcej selektorów klas niż selektorów atrybutu, chyba że reguła ta musi pojawić się wcześniej w arkuszu stylów.

Jest to kolejny problem, który selektorzy 4 rozwiązuje dzięki ulepszeniu specyfiki :not(). W Selectors 4 będziesz w stanie zastąpić wszystkie negacje jednym pseudo :not(), skutecznie zmniejszając swoją specyfikę w oryginalnym selektorze do tylko jednego selektora atrybutu. Od section 16:

specyfika: not() pseudo-klasa otrzymuje specyfiki najbardziej swoistego kompleksu selektora na swojej liście selektor argument.

Ponieważ dowolny selektor atrybutu jest równoznaczny z selektorem klasy, specyfika dowolnej liczby pojedynczych selektorów atrybutu na liście nigdy nie będzie większa niż tylko jedna z nich. Pozwala to uciec z użyciem tylko jednego selektora klasy do zastąpienia bez konieczności powtarzania go.

Poniższy works in Safari jako proof-of-concept:

/* 1 type, 2 attributes -> specificity = (0, 2, 1) 
 
input:not([type="checkbox"]):not([type="radio"]), 
 
    1 type, 1 attribute -> specificity = (0, 1, 1) */ 
 
input:not([type="checkbox"], [type="radio"]) { 
 
    background-color: blue; 
 
} 
 

 
/* 1 type, 1 class  -> specificity = (0, 1, 1) */ 
 
input.red { 
 
    background-color: red; 
 
}

<input type="checkbox"> 
 
<input type="radio"> 
 
<input type="text"> 
 
<input class="red" type="text">

Answer 2

ten może dostać się wokół kwestii specyficzność:

input:not([type="checkbox"]):not([type="radio"]):not(.red)) { 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
}

<input type="checkbox"><br> 
 
<input type="radio"><br> 
 
<input class="red">