¿Cómo evito la herencia de CSS?

Tengo un menú de navegación jerárquico en mi barra lateral que usa listas anidadas (tags

    y

  • ). Estoy usando un tema prefabricado que ya tiene estilos para los elementos de la lista, pero quiero modificar el estilo para los elementos de nivel superior pero NO aplicarlo a los subtemas. ¿Hay alguna manera fácil de aplicar estilos a la etiqueta del elemento de la lista de nivel superior sin tener esos estilos en cascada a sus elementos de la lista de niños? Entiendo que puedo agregar explícitamente estilos principales a los subtemas, 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 hacer una cascada”. a ellos a cualquier elemento infantil “. Aquí está el html que estoy usando:

     

    Así que el css ya tiene estilos para “#sidebar ul” y “#sidebar ul li”, pero me gustaría agregar estilos adicionales a “#sidebar .top-level-nav” que NO caen en cascada a sus sub-hijos. ¿Hay alguna forma de hacer esto simplemente o necesito reorganizar todos los estilos para que los estilos que estaban en “#sidebar ul” 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 deberá aplicar estilos a los elementos de la lista infantil para anular los estilos en los elementos de la lista principal.

    La conexión en cascada es una especie de punto de las Hojas de Estilo en Cascada, de ahí el nombre.

  • Usted usa el selector de niños

    Entonces usando

     #parent > child 

    Hará que solo los niños de primer nivel tengan los estilos aplicados. Desafortunadamente IE6 no es compatible con el selector de niños.

    De lo contrario, puedes usar

     #parent child child 

    Para establecer otros estilos específicos para niños que están más de un nivel a continuación.

    Hay una propiedad llamada all en 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 valores predeterminados

    ejemplo

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

    El envoltorio con iframe hace obsoleto el CSS de los padres.

    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 en un documento HTML heredará todas las propiedades heredables de su elemento primario, excepto el elemento raíz ( html ), que no tiene un elemento primario. – W3C

    Además de anular todas las propiedades heredadas. También puede usar initial palabra clave initial , por ejemplo, color: initial; . También se puede usar 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; } 
     
    The quick brown fox jumps over the lazy dog

    Podría usar algo como jQuery para “desactivar” este comportamiento, aunque no creo que sea una buena solución ya que obtiene lógica de visualización en css y javascript. Aún así, dependiendo de sus requisitos, puede encontrar que los css utils de jQuery le hacen la vida más fácil que intentar hacky css, especialmente si está tratando de hacerlo funcionar para IE6.

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

     

    hello, how are you?

    I am fine, thank you.

    Luego prueba esto en CSS.

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

    afectar solo el párrafo ‘div2’.

     #div1 > p { color: red; } 

    afectar solo el párrafo ‘div1’.

    No necesita la referencia de clase para la li s. 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 las li que descienden inmediatamente desde la barra lateral.

    simplemente ajústelos a sus valores predeterminados en el selector “#sidebar ul li”