¿Cómo evito la herencia de CSS?

Tengo un menú de navegación jerárquico en mi barra lateral que usa listas anidadas (etiquetas <ul> y <li>). Estoy usando un tema prefabricado que ya tiene estilos para los elementos de la lista, pero quiero modificar el estilo de los elementos de nivel superior pero NO aplicarlo a los subelementos. ¿Existe una manera fácil de aplicar estilos a la etiqueta del elemento de la lista de nivel superior SIN tener esos estilos en cascada hacia los elementos de la lista secundaria? Entiendo que puedo agregar explícitamente estilos primordiales a los subelementos, pero realmente me gustaría evitar tener que duplicar todo ese código de estilo si hay una manera fácil de decir "aplicar estos estilos a esta clase y NO en cascada hasta los elementos secundarios ". Aquí está el html que estoy 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>

Entonces, el CSS tiene estilos para #sidebar uly #sidebar ul liya, pero me gustaría agregar estilos adicionales a #sidebar .top-level-naveso NO en cascada hacia sus sub-hijos. ¿Hay alguna forma de hacer esto simplemente o necesito reorganizar todos los estilos para que los estilos que estaban #sidebar ulactivados ahora sean específicos para ciertas clases?

Hasta el momento, no hay selectores principales (o como los llama Shaun Inman , selectores calificados ), por lo que tendrá que aplicar estilos a los elementos de la lista secundaria para anular los estilos de los elementos de la lista principal.

La cascada es una especie de todo el objetivo de las hojas de estilo en cascada, de ahí el nombre.

O usa el selector de niños

Entonces usando

#parent > child

Hará que solo se apliquen los estilos a los niños de primer nivel. Desafortunadamente, IE6 no es compatible con el selector de niños.

De lo contrario, puede usar

#parent child child

Para establecer otros estilos específicos para los niños que están más de un nivel por debajo.

Hay una propiedad llamada allen el módulo de herencia CSS3 . Funciona así:

#sidebar ul li {
  all: initial;
}

A partir de 2016-12, todos los navegadores excepto IE / Edge y Opera Mini admiten esta propiedad.

Puede usar el selector * para cambiar los estilos secundarios a los predeterminados

ejemplo

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

#parent * {
    white-space: initial;
}

Envolver con iframe hace que el CSS padre sea obsoleto.

La respuesta corta es: No, no es posible evitar la herencia de CSS. Solo puede anular los estilos establecidos en los padres. Ver la especificación:

Cada elemento de un documento HTML heredará todas las propiedades heredables de su padre excepto el elemento raíz ( html), que no tiene padre. - W3C

Además de anular todas las propiedades heredadas. También puede utilizar initialpalabras clave, por ejemplo color: initial;. También se puede utilizar junto con all, por ejemplo all: initial;, que restablecerá todas las propiedades a la vez. Ejemplo:

.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>

Tablas de soporte del navegador según ¿Puedo usar ...

• all (Actualmente no hay soporte en IE y Edge, otros son buenos)
• initial (Actualmente no hay soporte en IE, otros son buenos)

Puede resultarle útil si utiliza el selector de hijos directos> en algunos casos. Ejemplo:

.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>

El estilo de borde se ha aplicado solo a los hijos directos <li>, ya que borderes una propiedad no heredada. Pero el color del texto se ha aplicado a todos los elementos secundarios, ya que colores una propiedad heredada.

Por lo tanto, el >selector solo sería útil con propiedades no heredadas, cuando se trata de prevenir la herencia.

Puede usar algo como jQuery para "deshabilitar" este comportamiento, aunque no creo que sea una buena solución ya que obtiene la lógica de visualización en css y javascript. Aún así, dependiendo de sus requisitos, es posible que las utilidades css de jQuery le hagan la vida más fácil que probar hacky css, especialmente si está tratando de que funcione para IE6.

Por ejemplo, si tiene dos div en un documento XHTML.

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

Entonces intente esto en CSS.

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

afecta solo el párrafo 'div2'.

#div1 > p {
    color: red;
} 

afecta solo al párrafo 'div1'.

No necesita la referencia de clase para el lis. En lugar de tener CSS como

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

puedes escribir

ul#sidebar > li { color:black; }

Esto aplicará el estilo solo a los limensajes que descienden inmediatamente de la barra lateral ul.

simplemente configúrelos de nuevo a sus valores predeterminados en el selector "#sidebar ul li"