CSS para evitar que elemento hijo herede estilos principales

Posible duplicado:
¿Cómo evito la herencia de CSS?

¿Hay alguna manera de declarar la propiedad de CSS de un elemento de modo que no afecte a ninguno de sus elementos secundarios o hay una forma de declarar CSS de un elemento para implementar solo el estilo especificado y no heredar el estilo declarado por sus padres? ?

Un ejemplo rápido

HTML:

 
Content of the paragraph
Content of the span

CSS:

 form div { font-size: 12px; font-weight: bold; } div.content { /* Can anything go here? */ } 

En circunstancias normales, uno esperaría que el bloque de texto “Contenido del párrafo” y “Contenido del intervalo” sean 12px y negrita.

¿Hay alguna propiedad para incluir en el CSS anterior en el bloque “div.content” que evitará que herede la statement en el bloque “#container form div” para limitar el estilo a solo “contenido del párrafo” y repuesto ” Contenido del lapso “incluyendo cualquier otro div para niños?

Si se está preguntando por qué, bueno, creé un archivo CSS particular que otorga a todos los formularios de mi proyecto una sensación particular y los divs bajo el formulario heredan la sensación. No hay problema. Pero dentro del formulario quiero usar Flexigrid pero flexigrid hereda el estilo y parece inútil. Si uso flexigrid fuera del formulario y no heredará los formularios css, se verá genial. De lo contrario, se ve terrible.

Lamentablemente, no tienes suerte aquí.

Hay inherit para copiar un cierto valor de un elemento principal a sus elementos secundarios, pero no hay ninguna propiedad al revés (lo que implicaría que otro selector decida qué estilo revertir).

Deberá revertir los cambios de estilo manualmente:

 div { color: green; } form div { color: red; } form div div.content { color: green; } 

Si tiene acceso al marcado, puede agregar varias clases para diseñar con precisión lo que necesita:

 form div.sub { color: red; } form div div.content { /* remains green */ } 

Editar: El Grupo de trabajo de CSS está haciendo algo :

 div.content { all: revert; } 

Ni idea, cuando o si alguna vez esto será implementado por los navegadores.

Edición 2: a partir de marzo de 2015 todos los navegadores modernos, pero Safari e IE / Edge lo han implementado: https://twitter.com/LeaVerou/status/577390241763467264 (gracias, @Lea Verou !)

Editar 3: se cambió el nombre default para revert .

¿No puedes diseñar los formularios ellos mismos? Luego, modele los divs en consecuencia.

 form { /* styles */ } 

Siempre puede anular los estilos heredados haciéndolo importante:

 form { /* styles */ !important } 

Las reglas de CSS se heredan por defecto, de ahí el nombre “en cascada”. ¡Para obtener lo que quiere, debe usar! Importante:

 form div { font-size: 12px; font-weight: bold; } div.content { // any rule you want here, followed by !important }