html - seleccionar - selectores css3

¿Cómo puedo deshabilitar los estilos CSS heredados?

Question

Así que estoy creando un contenedor 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, cuando coloco un div dentro de mis divs anidados, el botón tiene la imagen de bl en la esquina.

¿Cómo elimino la imagen de fondo heredada?

Answer 1

Dale al div que no quieres que él también herede el fondo de la propiedad.

Answer 2

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 div.rounded div div una regla para div.rounded div div , significa que cada elemento div anidado dentro de un div dentro de un div con una clase de rounded , independientemente del anidamiento .

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

Por cierto, generalmente puede simplificar este método para usar solo dos div s (uno para cada uno de los dos, arriba y abajo o izquierda y derecha), usando una técnica llamada Puertas corredizas .

Answer 3

La solución más limpia es probablemente especificar tus divs como hijos exactos.

Intenta 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

Las hojas de estilo en cascada están diseñadas para herencia. La herencia es intrínseca a su existencia. Si no estuviera diseñado para ser 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 "herencia de bloqueo".

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

Por ejemplo, puede usar estilos que comiencen con # para objetos con una ID específica:

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

Puedes definir clases para objetos:

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

Espero eso ayude.

Answer 5

Lo más simple es clasificar todas las 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>

Answer 6

Si controla tanto el código HTML como el CSS, sugeriría cambiar a usar 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>