¿Cómo excluir un formato CSS?

Question

posibles duplicados:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class

tengo CSS como esto

.div1 img { 
    // ... 
} 

.myimg { 
    // ... 
} 

y mi código HTML es así,

<div class="div1"> 
    ... 
    <img src="..." class="myimg">  // image html 
    ... 
</div> 

El formato css definido en .div1 img se aplica obviamente al código html de la imagen. Sin embargo, en realidad no quiero que suceda. ¿Qué puedo hacer para no tener efectos '.div1 img' en ese código html de imagen? No quiero modificar el contenido de div1 img ni el código html relacionado porque ya se usa en otros lugares (y es un código de plantilla con el que no quiero meterme).

P.S. No puedo eliminar o modificar <div class="div1"> ya sea porque hay otro código de plantilla alrededor.

Gracias.

Answer 1

Usted tiene dos opciones:

1. Puede anular de forma explícita todo el estilo definido en .div1 img con lo que deben estar en .myimg
2. Puede escribir .div1 img:not(.myimg) para la primera regla.

Answer 2

Se podría hacer:

.div1 img:not(.myimg) { 
    // ... 
} 

: no selectora explicó here

Answer 3

necesita neutralizar todos los estilos que está dando a ".div1 img", por ejemplo, si dice "ancho: 100px", debe decir "ancho: automático" en el otro.

Aunque si tiene muchas reglas en el primer conjunto, estaría muy sucio de esta manera y necesita cambiar su diseño.

Answer 4

Hay un buen pequeño not selector que funcionaría, pero desafortunadamente no funciona en todos los navegadores.

Una manera segura de hacerlo es redefinir todos sus estilos .div1 en su clase .mying de modo que anule al padre.

aquí es una pequeña demostración en jsFiddle: http://jsfiddle.net/u6MnN/1/

perder el tiempo con ella y ver qué es lo mejor para usted.

Answer 5

Si tiene etiquetas img dentro de un contenedor div con clase .div1 obtendrán, por supuesto, el estilo que defina en .div1 img, pero si lo desea, digamos 2 imágenes de 8 en ese div para tener otro estilo (que cree que es por eso que hiciste clase .myimg), necesitas poner !importante después de los estilos definidos en .myimg así:

.div1 img 
{ 
    height: 125px; 
    width: 125px; 
} 
.myimg 
{ 
    height: 150px !important; 
    width: 150px !important; 
} 

Ésta es sólo si usted no está usando CSS 3.0