Pregunta ¿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 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:

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

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.


73
2018-06-05 21:08


origen


Respuestas:


Hasta el momento no hay selectores principales (o Shaun Inman los llama, 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.


30
2018-06-05 21:23



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.


66
2018-06-05 21:22



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 pero IE / Edge y Opera Mini apoyar esta propiedad.


29
2018-03-13 08:22



Puedes usar el * selector para cambiar los estilos secundarios a los valores predeterminados

ejemplo

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

#parent * {
    white-space: initial;
}

21
2017-10-14 12:42



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


9
2017-07-17 13:28



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

Además de anular todas las propiedades heredadas. También puedes usar initial palabra clave, p. color: initial;. También se puede usar junto con all, p.ej. 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 encontrarlo útil al usar selector de niños 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 niños directos <li>s, como border es una propiedad no heredada. Pero el color del texto se ha aplicado a todos los niños, como color es una propiedad heredada.

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


3
2018-01-10 04:27



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.


2
2018-06-05 22:45



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

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

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


2
2017-10-05 07:18



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 lis que descienden inmediatamente desde la barra lateral ul.


2
2017-07-17 14:20



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


0
2018-06-05 21:12