¿Cómo Aislar un div de estilos CSS públicos?

Tengo algún código, por ejemplo, aquí en html

<html>
 <body>
  <img src='an image source'/>
  <h1>Hi it's test</h1>
  <div id='mydiv'>
    <img src='an image source'/>
    <h1>Hi it's test</h1>
  </div>
 </body>
</html>

Si utilizo el siguiente código css para darle estilo:

img{
   width:100px;
   height:100px;
}
h1{
   font-size:26px;
   color:red;
}

La pregunta es: ¿Cómo puedo evitar y aislar las etiquetas dentro de la etiqueta mydiv div del estilo por el estilo de etiquetas públicas ?

Author: Kara, 2012-04-08
Source

4 answers

CSS Cascading and Inheritance Level 3 introduce la propiedad abreviada all y la palabra clave unset , que, juntas, le permiten lograr esto convenientemente.

Por ejemplo, si un autor especifica all: initial en un elemento, bloquear toda la herencia y restablecer todas las propiedades, como si no hubiera reglas apareció en los niveles autor, usuario o agente de usuario de la cascada.

Esto puede ser útil para el elemento raíz de un " widget" incluido en a página, que no desea heredar los estilos de la página exterior. Tenga en cuenta, sin embargo, que cualquier estilo" predeterminado " aplicado a ese elemento (tales como, por ejemplo, display: block de la hoja de estilo UA en los elementos de bloque tales as <div>) también será volado.

Tendrás que aplicar all: initial a tu div y all: unset a sus descendientes: 

#mydiv {
  all: initial; /* blocking inheritance for all properties */
}
#mydiv * {
  all: unset; /* allowing inheritance within #mydiv */
}

Es posible que desee usar una clase en su div en lugar de un id, para que las reglas que escriba para diseñar sus descendientes no tengan que coincidir o batir la alta especificidad utilizada en esta regla.

Para estar realmente seguro, es posible que desee bloquear estilos en posibles descendientes de pseudo-elemento también: 

#mydiv::before,
#mydiv::after,
#mydiv *::before,
#mydiv *::after {
  all: unset;
}

Alternativamente, para un soporte más amplio del navegador, puede intentar manualmente hacer lo que hace all estableciendo todas las propiedades CSS conocidas (no olvide las versiones prefijadas): 

#mydiv {
  /*
   * using initial for all properties
   * to totally block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  alignment-baseline: initial;
  animation: initial;
  backface-visibility: initial;
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * using inherit for normally heritable properties,
   * and initial for the others, as unset does
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}

Puede alentar el soporte del navegador para la propiedad abreviada all y rastrear su adopción con estos enlaces de problemas:

La información actualizada de soporte del navegador para la propiedad abreviada all está disponible aquí.

 84
Author: jaredjacobs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-30 00:18:27

Técnicamente no se puede, así es como se supone que funciona CSS. Si hay algún estilo definido para la etiqueta div en su hoja de estilo se aplicará a todos los elementos div.

Pocas cosas que puedes probar son no usar el estilo con el nombre de la etiqueta en su lugar, dar nombre de clase y dar declaración de estilo a la clase. para que pueda asegurarse de dónde irán todos los estilos.

O. si desea que alguna etiqueta Div específica no tenga el estilo mientras que otros Divs lo tengan. siempre se puede restablecer dar algún nombre o id de clase diferente y restablecer las declaraciones de estilo

 9
Author: Kamal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-08 17:02:46

Una cosa que podría ser útil es el selector secundario directo de CSS , que está disponible en todos los navegadores, incluido IE7+. Eso le permite aplicar un estilo que no cae en cascada en los niños. Por ejemplo, en tu código puedes usar este CSS:

body > img {
  width:100px;
  height:100px;
}
body > h1 {
  font-size:26px;
  color:red;
}

Y que CSS solo se aplicaría a elementos directamente en el elemento BODY.

 0
Author: jpsimons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-08 17:59:57

Vieja pregunta, pero las cosas han cambiado un poco desde la respuesta aceptada. Ahora hay una palabra clave recomendada por CSSWG llamada revert que sería más adecuado que initial y unset para resolver este problema, ya que restablece la propiedad de un elemento al valor definido en la hoja de estilos del agente de usuario en lugar del valor inicial de la propiedad independientemente del elemento en el que se use. Así, por ejemplo, un div dentro de #mydiv tendrá su pantalla configurada a block como esperaríamos y no inline.

Tendrías Que hacer esto:

#mydiv,
#mydiv::before,
#mydiv::after,
#mydiv *
#mydiv *::before,
#mydiv *::after {
  all: revert;
}

Desafortunadamente, revert no es compatible con ningún navegador que no sea Safari (para Mac e iOS) en el momento de escribir este artículo.

También hay algo más que tomar en consideración con respecto a la respuesta aceptada. Si desea estilizar cualquier cosa dentro de #mydiv, debe hacerlo con un selector que sea al menos tan específico como el que usó para desajustar o revertir todo, de lo contrario, lo hará ser anulado por esa regla, incluso si viene después de ella en el CSS.

Por lo que tendría que hacer algo como esto (tenga en cuenta el #mydiv que aumenta la especificidad de las reglas): 

#mydiv p {
  margin-top: 20px;
}

#mydiv .bg-black {
  background-color: black;
}

// etc.
 0
Author: benface,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-15 23:16:21