¿Cómo reemplaza una regla CSS a otra regla CSS?

Question

lo tanto, esto es lo que estoy haciendo:

#id-form td { 
padding: 0 0 10px 0; 
} 

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
} 

Tengo una tabla #id-form, sobre el que establecer todos td s tener padding-bottom: 10px.
Pero en una ocasión especial, quiero que un td en particular tenga padding: 10px en todas las direcciones, que configuré en el #particular-td.

Obviamente, puse el estilo de CSS en secuencia en un archivo externo.
Pero el CSS procesado solo tiene padding-bottom, y padding: 10px parece estar anulado?

Por favor explique:
¿Cómo y por qué sucede esto?
¿Cómo debo organizar estas reglas para resolver mi problema (que no sea el estilo en línea)?

EDITAR: Eliminé 'table' antes de #id-form en la tabla. Nunca lo usé, solo lo mencioné aquí para poder explicarlo mejor.

Answer 1

A causa de CSS Specificity. La ponderación de un selector se evalúa en base a los componentes que lo integran, con id 's dado una ponderación del 100, class es con una ponderación de 10, y element selectores con ponderación de 1.

Así que en su ejemplo:

table#id-form td 

Tiene un peso de 102 (es table#id 101 y td es 1), mientras que esto:

#particular-td 

Tiene una ponderación de 100. Si cambia de segundo para esto:

#id-form #particular-td 

Obtendrá una ponderación de 200 que anulará el selector anterior. Solo como último recurso, debe usar !important, ya que esto prácticamente le impide anularlo más adelante en la línea.

Answer 2

Prueba este código, se han añadido! Importante para su css, en este modo puede ovveride el relleno de la tabla # id-td forma

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px !important; 
} 

Answer 3

Esto tiene que ver con la especificidad. table#id-form td es más específico que #particular-td. Una regla con mayor especificidad tiene prioridad sobre una regla con menor especificidad.

Éstos son algunos recursos para empezar en la comprensión de cómo funciona:

• Smashing Magazine article
• W3C spec on specificity
• Specificity calculator

Acerca del uso importante, según lo sugerido por los demás :

Uno podría estar tentado a usar la palabra clave !important para solucionar esto, pero que rara vez una buena idea:

1. se convierte en un dolor de mantener/solucionar
2. Se rompe el flujo normal de CSS
3. la regla no puede ser cambiada por otras reglas más adelante

puede ser que tome unos minutos para leer sobre la especificidad, pero será bien vale la pena el tiempo cuando se tiene una comprensión de la misma.

Answer 4

Tiene dos formas, o agrega!importante después de su relleno para lo particular-td:

padding: 10px !important; 

O, el selector alterada de este modo:

table#id-form td#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
} 

Ambos son bien. Personalmente, no me gusta el uso de! Importante si puedo evitarlo.