¿Cómo puedo desactivar estilos de CSS heredados?

Question

Así que estoy creando un recipiente con esquinas redondeadas utilizando el siguiente método:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div div div { 
    padding: 10px; 
} 

Ahora quiero usar un div dentro de mi contenedor:

.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

<div class='round'><div><div><div> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Sin embargo, la pongo un div dentro de mi divs anidados, el botón tiene la imagen bl en la esquina.

¿Cómo elimino la imagen de fondo heredada?

Answer 1

La respuesta simple es cambiar

div.rounded div div div { 
    padding: 10px; 
} 

a

div.rounded div div div { 
    background-image: none; 
    padding: 10px; 
} 

La razón se debe a que cuando se hace una regla para div.rounded div div que significa cadadiv elemento anidado dentro de un div dentro de un div con una clase de rounded, independientemente de anidar.

Si solo desea orientar un div que es el descendiente directo, puede usar la sintaxis div.rounded div > div (aunque esto solo es compatible con los navegadores más recientes).

Por cierto, generalmente puede simplificar este método para usar solo dos div s (uno para la parte superior e inferior o izquierda y otra para la derecha), usando una técnica llamada Sliding Doors.

Answer 2

Dale a la div no quieres que él herede la propiedad background too too.

Answer 3

La solución más limpia es probablemente especificar sus divs como niños exactos.

trate de cambiar esto:

div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

A esto:

div.rounded > div > div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

Answer 4

Cascading Style Sheet están diseñados para la herencia. La herencia es intrínseca a su existencia. Si no se creó para conectarse en cascada, solo se llamarían "Hojas de estilo".

Dicho esto, si un estilo heredado no se ajusta a sus necesidades, tendrá que anularlo con otro estilo más cercano al objeto. Olvídate de la noción de "bloquear la herencia".

También puede elegir la solución más granular dando estilos a cada objeto individual, y no dando estilos a las etiquetas generales como div, p, pre, etc.

Por ejemplo, puede utilizar estilos que comienzan con # para objetos con un ID específico:

<style> 
#dividstyle{ 
    font-family:MS Trebuchet; 
} 
</style> 
<div id="dividstyle">Hello world</div> 

Se pueden definir clases de objetos:

<style> 
.divclassstyle{ 
    font-family: Calibri; 
} 
</style> 
<div class="divclassstyle">Hello world</div> 

espero que ayude.

Answer 5

Si controlas tanto el HTML como el CSS, te sugiero que cambies el uso de ID en todos los divs necesarios para la esquina redondeada.

CSS

#d1 { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
#d2 { 
    background: url('br.gif') no-repeat bottom right; 
} 
#d3 { 
    background: url('bl.gif') no-repeat bottom left; 
} 
#d4 { 
    padding: 10px; 
} 

HTML

<div id="d1"><div id="d2"><div id="d3"><div id="d4"> 
    <div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Answer 6

más simple es la clase-Si y todos los divs:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div.br { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div.br div.bl { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div.br div.bl div.inner { 
    padding: 10px; 
} 
.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

y luego usar:

<div class='round'><div class='br'><div class='bl'><div class='inner'> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div>