Invalidar estilo CSS

Question

Estoy definiendo algunas clases de CSS que, cuando se aplican a una tabla, generarán un estilo predeterminado.

Por ejemplo, digamos que se crea una clase llamada myTable:

.myTable { 
    th { 
    background-color: #000; 
    } 

    td { 
    background-color: #555; 
    } 
} 

Así que cualquier mesa con la clase .myTable sería conseguir esos colores en th y td por defecto.

Pensé que si se asignara otra clase a una td individual, se anularía el estilo predeterminado.

Así que si tuviera otra clase:

.red { background-color: red; } 

y una mesa:

<table class=myTable> 
    <th class="red">Content</th> 
    <td>Hello!</td> 
</table> 

pensé que la clase "rojo" podría hacer que el fondo de la cabecera a ser de color rojo, en lugar de negro. Ese no es el caso. Para que esta clase para reemplazar el original, que tiene que ser definido dentro de la clase myTable así:

td.red { background-color: red; } 

Me estoy perdiendo algo aquí, ¿hay otra manera de hacer esto para que yo pudiera tener estilos predeterminados que son más fácilmente anulados?

Answer 1

La idea es qué estilo usar depende de dos cosas: qué tan específico es el selector, la posición de la regla (última regla gana). Ejemplo:

p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Los párrafos serán azules. Otro ejemplo:

body p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Los párrafos serán rojos ya que "cuerpo p" es más específico.

Editar: También intente evitar el uso! Importante. Es compatible, pero un efecto secundario es que nunca puede anularlo (nunca). Por lo tanto, solo úsela en los casos realmente extremos en los que no tenga forma de saber cómo construir reglas suficientemente específicas (por ejemplo, generic print.css).

Answer 2

Hay una forma estándar de otorgar prioridad de estilo.

td.red { background-color: red !important; } 

Answer 3

Esto es todo una cuestión de la especificidad de los selectores CSS utilizados (es decir, ¿cómo funciona exactamente coincide con un selector de cualquier elemento HTML dado). Cuanto más específico sea un selector, mayor será la prioridad de sus estilos.

Para una explicación detallada de la especificidad del selector CSS, échele un vistazo a esta página: CSS Specificity: Things You Should Know.

Answer 4

Hay un par de maneras, puede utilizar !important al final de la declaración como tal:

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

Además, la declaración más específica, la más frecuente será. Entonces, cualquier cosa en table.myTable td.red {} tendrá más prevalencia sobre cualquier cosa en td.red{}.

Answer 5

La regla !important anula una propiedad en particular en css.

Por lo tanto, en caso de anular una propiedad, siempre debe usarla con el valor.

Más detalles en: https://css-tricks.com/when-using-important-is-the-right-choice/