¿Cómo puedo dirigirme específicamente a esta identificación de elemento con CSS?

Question

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

que tienen un selector CSS #checkout form.center ya se está utilizando

me gustaría anular esta específicamente para el formulario de confirmación, pero ninguna de las cosas que trato de escribir obtener aplicado. Debería pensar que #confirmation form.center o algo debería reemplazar a la primera regla, pero ni siquiera parece alcanzar el objetivo. #confirmation es anulado por el selector mencionado anteriormente porque no es tan específico.

Answer 1

Ampliando la respuesta de BoltClock:

Cada selector CSS tiene un valor specificity. Para cada elemento, en caso de conflicto por el valor de una de sus propiedades, prevalece la regla con mayor especificidad. En general, cuanto más y mejor es la información en un selector de CSS, mayor es su especificidad.

Por esta razón, la adición de algo apropiado a su selector existente (#checkout form.center) le permitirá anular que:

#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

Si necesita anular específicamente el selector existente, utilice:

#checkout #confirmation 

La razón por la #confirmation form.center no funciona se debe a que selecciona form.center que se encuentra dentro de un elemento #confirmation, que no es el mismo. Usted lo habría escrito como esto en su lugar:

#checkout form#confirmation.center 

pero eso es demasiado exagerado; el primer selector que sugiero es lo suficientemente específico para anular tu primer selector.