Come posso indirizzare in modo specifico questo ID elemento con CSS?

Question

<div id=checkout> 
<form id="confirmation" class="center"> 
<p>content</p> 
</form> 
</div> 

Ho un selettore CSS #checkout form.center già utilizzato

vorrei ignorare questa appositamente per il modulo di conferma, ma nessuna delle cose che cerco di scrivere venga applicato. Dovrei pensare che #confirmation form.center o qualcosa debba sostituire la prima regola, ma non sembra nemmeno colpire il bersaglio. #confirmation viene sovrascritto dal selettore sopra indicato perché non è così specifico.

Answer 1

Ampliando la risposta di BoltClock:

Ogni selettore CSS ha un valore specificity. Per ogni elemento, in caso di conflitto per il valore di una delle sue proprietà, la regola con la massima specificità ha la precedenza. In genere, più e meglio sono le informazioni in un selettore CSS, maggiore è la sua specificità.

Per questo motivo, l'aggiunta di qualcosa di appropriato al vostro selettore esistente (#checkout form.center) vi permetterà di ignorare che:

#checkout form.center { 
    /* your existing CSS */ 
} 

#checkout #confirmation { 
    /* your overrides; this has higher specificity */ 
} 

#checkout form#confirmation { 
    /* this would also work -- even higher specificity */ 
} 

#checkout form#confirmation.center { 
    /* even higher */ 
} 

#checkout form.center p { 
    /* works inside the p only, but also has 
    greater specificity than #checkout form.center */ 
} 

Answer 2

Se è necessario sostituire il vostro specifico selettore esistente, utilizzare:

#checkout #confirmation 

Il motivo per cui #confirmation form.center non funziona è perché che seleziona form.center che si trova all'interno di un elemento #confirmation, che non è il stesso. Lo avresti scritto invece:

#checkout form#confirmation.center 

ma questo è eccessivo; il primo selettore che suggerisco è abbastanza specifico da scavalcare il tuo primo selettore.