CSS para evitar que o elemento filho herde os estilos pai

Duplicar Possível:
Como evito a inheritance do CSS?

Existe uma maneira de declarar a propriedade CSS de um elemento de forma que ele não afete nenhum de seus filhos ou existe uma maneira de declarar CSS de um elemento para implementar apenas o estilo especificado e não herdar qualquer um dos estilos declarados para seus pais? ?

Um exemplo 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? */ } 

Em circunstâncias normais, seria de esperar que o bloco de texto “Conteúdo do parágrafo” e “Conteúdo do intervalo” seja de 12 px e negrito.

Existe uma propriedade para include no CSS acima no bloco “div.content” que impedirá que ele herde a declaração no bloco “#container form div” para limitar o estilo a apenas “conteúdo do parágrafo” e de reposição ” Conteúdo do período “incluindo qualquer outro div crianças?

Se você está se perguntando por que, bem, eu criei um arquivo CSS particular que dá a todos os formulários do meu projeto uma sensação particular e os divs sob o formulário todos herdam a sensação. Sem problemas. Mas dentro do formulário eu quero usar o Flexigrid, mas o flexigrid herda o estilo e parece inútil. Se eu usar o flexigrid fora do formulário e ele não herdar o forms css, ele ficará ótimo. Caso contrário, apenas parece terrível.

Infelizmente, você está sem sorte aqui.

inherit para copiar um certo valor de um pai para seus filhos, mas não há nenhuma propriedade ao contrário (o que envolveria outro seletor para decidir qual estilo reverter).

Você terá que reverter as alterações de estilo manualmente:

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

Se você tiver access à marcação, poderá adicionar várias classs para estilizar com precisão o que você precisa:

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

Edit: O CSS Working Group está pronto para algo :

 div.content { all: revert; } 

Não faço ideia, quando ou se isso for implementado pelos navegadores.

Edit 2: A partir de março de 2015, todos os navegadores modernos, mas o Safari e o IE / Edge, o implementaram: https://twitter.com/LeaVerou/status/577390241763467264 (obrigado, @Lea Verou !)

Editar 3: o default foi renomeado para revert .

Você não pode estilizar os formulários? Em seguida, estilize os divs de acordo.

 form { /* styles */ } 

Você sempre pode anular estilos herdados, tornando-o importante:

 form { /* styles */ !important } 

As regras CSS são herdadas por padrão – daí o nome “em cascata”. Para conseguir o que você quer, você precisa usar! Importante:

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