Como posso evitar a herança de CSS?

Eu tenho um menu de navegação hierárquico em minha barra lateral que usa listas aninhadas (tags <ul> e <li>). Estou usando um tema predefinido que já tem estilos para itens de lista, mas quero alterar o estilo para os itens de nível superior, mas NÃO o aplico aos subitens. Existe uma maneira fácil de aplicar estilos à tag de item de lista de nível superior SEM ter esses estilos em cascata para seus itens de lista filhos? Eu entendo que posso adicionar explicitamente estilos de substituição aos subitens, mas eu realmente gostaria de evitar ter que duplicar todo o código de estilo se houver uma maneira fácil de apenas dizer "aplique esses estilos a esta classe e NÃO faça cascata até quaisquer elementos filhos ". Aqui está o html que estou usando:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

Portanto, o CSS tem estilos para #sidebar ule #sidebar ul lijá, mas eu gostaria de adicionar estilos adicionais para #sidebar .top-level-navque NÃO sejam cascateados para seus sub-filhos. Existe alguma maneira de fazer isso de forma simples ou preciso reorganizar todos os estilos para que os estilos que estavam #sidebar ulativados agora sejam específicos para certas classes?

No momento, não há seletores pais (ou como Shaun Inman os chama, seletores qualificados ), então você terá que aplicar estilos aos itens da lista filho para substituir os estilos nos itens da lista pai.

O cascateamento é o ponto principal das folhas de estilo em cascata, daí o nome.

Você pode usar o seletor filho

Então usando

#parent > child

Fará com que apenas os filhos do primeiro nível tenham os estilos aplicados. Infelizmente, o IE6 não suporta o seletor filho.

Caso contrário, você pode usar

#parent child child

Para definir outros estilos específicos para crianças que estão mais de um nível abaixo.

Existe uma propriedade chamada allno módulo de herança CSS3 . Funciona assim:

#sidebar ul li {
  all: initial;
}

A partir de 2016-12, todos os navegadores, exceto IE / Edge e Opera Mini, oferecem suporte a essa propriedade.

Você pode usar o seletor * para mudar os estilos filho de volta ao padrão

exemplo

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

O empacotamento com iframe torna o CSS pai obsoleto.

A resposta curta é: Não, não é possível prevenir a herança CSS. Você só pode substituir os estilos definidos nos pais. Veja as especificações:

Cada elemento em um documento HTML herdará todas as propriedades herdáveis ​​de seu pai, exceto o elemento raiz ( html), que não tem um pai. - W3C

Além de substituir todas as propriedades herdadas. Você também pode usar initialpalavras-chave, por exemplo color: initial;. Também pode ser usado junto com all, por exemplo all: initial;, que redefinirá todas as propriedades de uma vez. Exemplo:

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

Tabelas de suporte de navegador de acordo com Posso usar ...

• all (Atualmente sem suporte no IE e Edge, outros são bons)
• initial (Atualmente sem suporte no IE, outros são bons)

Você pode achar útil usando o seletor direto de filhos> em alguns casos. Exemplo:

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

O estilo da borda foi aplicado apenas aos filhos diretos <li>, pois borderé uma propriedade não herdada. Mas a cor do texto foi aplicada a todos os filhos, pois coloré uma propriedade herdada.

Portanto, o >seletor só seria útil com propriedades não herdadas, quando se trata de evitar herança.

Você poderia usar algo como jQuery para "desabilitar" esse comportamento, embora eu dificilmente ache que é uma boa solução, já que você obtém a lógica de exibição em css e javascript. Ainda assim, dependendo dos seus requisitos, você pode descobrir que os utilitários css do jQuery tornam a vida mais fácil para você do que tentar css hacky, especialmente se você estiver tentando fazê-lo funcionar para o IE6

Por exemplo, se você tiver dois div no documento XHTML.

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

Em seguida, tente isso em CSS.

#div1 > #div2 > p{
    color: red;
}

afetam apenas o parágrafo 'div2'.

#div1 > p {
    color: red;
} 

afetam apenas o parágrafo 'div1'.

Você não precisa da referência de classe para o lis. Em vez de ter CSS como

li.top-level-nav { color:black; }

você pode escrever

ul#sidebar > li { color:black; }

Isso aplicará o estilo apenas aos lis que descem imediatamente da barra lateral ul.

basta configurá-los de volta para seus padrões no seletor "#sidebar ul li"