Herencia CSS y anulándola

Soy nuevo en CSS. He creado un sitio de Drupal y juego con el tema.Herencia CSS y anulándola

Tengo algo de migas de pan que me gustaría tema. Si entro en Firebug y apago las propiedades CSS

background 
border-color 
border-style

en el código de abajo

.breadcrumbs .inner { 
    background: none repeat scroll 0 0 #EFEFEF; 
    border-color: #929292 #E2E2E2 #FFFFFF; 
    border-style: solid; 
    border-width: 1px; 
    color: #8E8E8E; 
}

consigo el texto se ve exactamente como yo quiero.

Si ahora voy a mi style.css que se hereda el código y post

.breadcrumbs .inner { 
    border-width: 1px; 
    color: #8E8E8E; 
}

El formato no quiero que se mantiene. Si especifico .breadcrumbs .inner en style.css, ¿eso no lo configura nuevamente y anula lo que se especificó más arriba en la cascada?

Si ese no es el caso, ¿cómo detengo la herencia sin cambiar la otra hoja de estilo?

Gracias,

Andrew

Información adicional

Aquí es lo que tengo en este momento

enter image description here

Esto es lo que yo quiero tener enter image description here

Fuente

2011-01-27 Andrew

Use! Important después de cada propiedad que desea anular. como 'display: inline! important;' – Cronco

@BoltClock Sé que es una mala práctica.Alternativamente, solo restablecer las propiedades estaría bien, supongo, si es exactamente el mismo selector y se define después del primero, usando por ejemplo 'background: transparent;' debe anular la primera declaración. – Cronco

Estás anulando CSS no reemplaza los 3 estilos que deseas cambiar, por lo que se mantienen los originales. Lo que es probable que quiere hacer es tener su style.css establecer algo como esto:

.breadcrumbs .inner { 
    background: none; 
    border-color: transparent; 
    border-style: none; 
}

Fuente

2011-01-27 23:02:06 nybbler

Gracias por la respuesta, lo intenté, actualicé el caché, etc. y no hubo cambios, ¿qué más debo probar? – Andrew

@Andrew: Según las capturas de pantalla que ha agregado, style.css no contenía ninguna definición para '.breadcrumbs .inner' Cuando dice que actualizó la caché, vació todos sus archivos temporales de Internet y luego volvió a cargar la página. También pruebe + F5, a veces F5 solo simplemente no lo hace. Aparte de eso, comprobaría dos veces para asegurarse de que tiene sus enlaces CSS en el orden en que los quiere (es decir: style.css después de gray.css) – nybbler

Hola, el ctrl + F5 funcionó. Gracias – Andrew

Si especifica los estilos CSS para mismas clases dos veces por el estilo resultante es una unión de los atributos definidos en ambas clases. Para eliminar los estilos anteriores, debe redefinir los atributos.

Fuente

2011-01-27 23:02:16 Chandu

Gracias por la respuesta ¿podría aclarar un poco más lo que quieres decir? No sé si he tenido suerte, pero cuando he seguido un método similar al que indiqué en mi publicación original, se aplicaron los cambios. – Andrew

Por ejemplo, si usted tiene estos css unido a su documento HTML

<link rel="stylesheet" type="text/css" href="css/default.css"> 
<link rel="stylesheet" type="text/css" href="css/posts.css">

si tiene la misma clase dice .color definido en los archivos tanto default.css y posts.css, es de imaginar que esa Ultimo archivo CSS se utiliza, pero se puede ignorar si usted lo escribe así:!

// default.css 
.color { 
    color: blue !important; 
} 

// posts.css 
.color { 
    color: green; 
} 
// In this example the colour would be blue.

el uso importante de las fuerzas de estilo heredado el estilo heredado para ser utilizado, si desea reemplazar el estilo heredado, entonces puede ¡simplemente agregue! important a post.css

// default.css 
.color { 
    color: blue !important; 
} 

// posts.css 
.color { 
    color: green !important; 
} 
// In this example the colour would be green.

Ahora ambos se consideran importantes y se utilizará el último.

Fuente

2014-12-29 19:16:33

Herencia CSS y anulándola

Respuesta

Cuestiones relacionadas