Qual è la differenza tra questi due selettori?Qual è la differenza tra questi due selettori usando ": not"?
input:not([type="radio"][type="submit"])
input:not([type="radio"]):not([type="submit"])
Sarà un tag <input> che non ha type attributo essere selezionati?
che ho letto:
Citando the Selector Level 4 docs :
La negazione pseudo-classe,
:not(), è funzionale pseudo-classe prendere un elenco selettore come argomento. Rappresenta un elemento che non è rappresentato dal suo argomento.Nota: Nel Livello 3 selettori, un solo selettore semplice è stato permesso come argomento di
:not().
che spiega il motivo per cui questo ...
input:not([type="radio"][type="submit"])
... non è supportato in qualsiasi browser che non implementa questa parte della spec CSS4 (per quanto ne so, nessuno lo fa a questo punto del tempo, è solo una bozza di lavoro, dopo tutto). Ma la logica è viziata in questo selettore, troppo: anche se la sintassi è stata sostenuta universalmente, essa avrebbe dovuto essere scritto come ...
input:not([type="radio"],[type="submit"])
Sede, [foo][bar] regola viene trattato come requisito per qualsiasi elemento di essere siafoo e bar. Ma (ovviamente!) Non è possibile che nessun input sia di tipo radio e submit.
La linea di fondo: dovrete usare ...
input:not([type="radio"]):not([type="submit"])
... perché CSS3 only supports simple selectors in :not.
Grazie per la risposta alla mia domanda. Naturalmente, c'è ** no ** '' tag che ha [type = "radio"] e [type = "submit"] entrambi. Quindi 'input: not ([type =" radio "] [type =" submit "])' seleziona tutti i tag ''? –
E ancora una domanda; questi due selettori selezionano ** un tag '' che non ha un attributo 'type' **? –
> Quindi input: not ([type = "radio"] [type = "submit"]) seleziona tutti i tag ? - No, a meno che CSS4 non sia supportato. Se quest'ultimo è, è esattamente perché fornisci ': not' con un selettore sempre non corrispondente. – raina77ow
Questa linea sembra essere valida, come multipla [] non sembrano passare il servizio di validazione del W3C per CSS:
input:not([type="radio"][type="submit"])
Questa linea, tuttavia, è valida e semplicemente esclude qualsiasi elemento di uno dei due tipi, ma seleziona qualsiasi altro che è un input:
input:not([type="radio"]):not([type="submit"])
non riesco a trovare alcuna prova per esso nella documentazione sul selettore :not tuttavia. Se si desidera testare la convalida, ecco un collegamento al validatore W3C: https://jigsaw.w3.org/css-validator/.
Ora, consente di testare questo in un frammento
input {
border: 1px solid blue;
}
#valid input:not([type="radio"]):not([type="submit"]){
border-color: red;
}
#invalid input:not([type="radio"][type="submit"]){
border-color: red;
}<div id="valid">
<pre><strong>Valid:</strong> input:not([type="radio"]):not([type="submit"])</pre>
<input type="text" />
<input type="submit" />
<input type="radio" />
</div>
<div id="invalid">
<pre><strong>Invalid:</strong> input:not([type="radio"][type="submit"])</pre>
<input type="text" />
<input type="submit" />
<input type="radio" />
</div>qui Cerco solo per la differenza
ho provato 4 modi nel jsfiddle di seguito come si può vedere con la commenti in
$(document).ready(function(){
//applied using jquery
\t $('.usingJquery input:not([type="radio"],[type="submit"])').css({
'background-color' : 'cadetblue',
'border' : 'dotted #7FFF00'
});
})input {
padding: 10px;
margin: 10px;
}
/*will apply the only first one so border and background will be applied all input types exluding radio type*/
input:not([type="radio"]) , input:not([type="submit"]){
border:1px solid grey;
background-color : green;
}
/*this will not work as you can not apply multiple in same parantheses as i think*/
input:not([type="radio"][type="submit"]){
border:1px solid green;
}
/*as i think for above code i tried using " , (comma)" seprator but it also didn't work*/
input:not([type="radio"],[type="submit"]){
border:1px solid aqua;
}
/*this will work as you can see */
input:not([type="radio"]):not([type="submit"]){
border:1px solid red;
background-color : yellow;
}<input type="radio">
<input type="submit">
<input type="file">
<input type="text">
<input type="checkbox">
<div class="usingJquery">
<input type="radio">
<input type="submit">
<input type="file">
<input type="text">
<input type="checkbox">
</div> e qui è il codice demo per questa spiegazione
e quello che ho trovato è da 2 domande del jsfiddle che sono collegate al di sotto
Refer for input:not(selector):not(selector)
E se vuoi provare ingresso: senza ([type = "radio"] [type = "submit"]) selettore mediante jquery con virgola "" separazione per questo si può fare riferimento
Waw questo è difficile. Stavo testando (e accidentalmente ho postato una risposta) che mostra che nessuno di loro ha effettivamente bersagliato alcun elemento - e dopo aver letto le specifiche per ': not', non chiarisce se potrebbero essere incatenati. Dice che non possono essere annidati, ma è così ... Mi chiedo se sta inciampando sul doppio 'tipo', ma non riesco a trovare un buon modo per dimostrarlo. Buona domanda! – somethinghere
Ovviamente, ': not' può essere incatenato, perché non dovrebbe? – raina77ow
Grazie per il tuo editing, Xufox! Hai fatto questo molto meglio. –