Css no anulará los valores heredados

Tengo un Html que contiene algo como: (Múltiples divs dentro de div A).Css no anulará los valores heredados

<div class="a"> 
    <div class="b"></div> 
</div>

Mi css parece que:

.a div { 
    border: solid; 
    border-width: thin; 
} 

.b { 
    border: none; 
    border-width: 0px; 
    border-collapse: collapse; 
}

Por alguna razón los valores de b no se anularán. sin embargo, si solo escribo un en lugar de "a .div", no obtendré el comportamiento esperado para los otros divs dentro de a.

¡La única forma de que esto funcione es usando "importante"! (es decir, "frontera: ninguna! importante";) pero eso parece menos que elegante.

encantaría alguna idea de lo que está ocurriendo allí ..

Ehud.

Fuente

2012-01-12 EhudFisher

tiene una especificidad mayor que .b.
Si desea que el css para .b sobrescriba el .a uno, asígnele una mayor especificidad, por ejemplo .a div.b.

(O puede utilizar !important, sí, pero eso no es recomendable aquí.)

Fuente

2012-01-12 09:12:27

Eso es algo poco intuitivo, al menos para mí, pero funciona como un encanto (por cierto, acabo de utilizar ".b div" y eso funcionó también). – EhudFisher

Es extraño, '.b div' no se supone que funcione, ya que no tienes divs dentro de tu .b, al menos no en tu ejemplo. De todos modos, la especificidad es un concepto muy importante dentro de CSS, te sugiero que leas sobre él. –

Sus selectores están equivocados.

En lugar de

a. div {

Escribir

div.a {

(seleccione cualquier div con una clase de "a")

En lugar de

b {

(que en realidad se intenta darle estilo a todos b elementos)

Uso

.b {

(que dice seleccionar cualquier cosa que se define por la clase de "b")

EDITAR (en respuesta a la respuesta)

Para seleccionar todos los divs que están dentro de un div con la clase de "a", use el siguiente selector: -

div.a div

Fuente

2012-01-12 08:50:04

Mis selectores (en el código) estaban bien, pero lo que puse en la pregunta obviamente estaba equivocado. Mis selectores son ".b" y ".a div". Lo siento, voy a editar la publicación original. La solución, sin embargo, no funciona para mí. Lo que intento seleccionar no son todos los divs con una clase a, sino todos los divs bajo un elemento cuya clase es a. – EhudFisher

Editado con un nuevo selector para usted, señor. –

Especificidad puntuación se calcula por los compiladores de CSS, la puntuación más alta de entre declaración pone de modificar el contenido.

Score se calcula generalmente por este orden:

inline id-element class-element no.-of-elements 
    $   $    $    $

($) -> 1 si el tipo respectivo de especificidad existe en código
($) -> 0 si el tipo respectivo de especificidad doesn 't existe en el código

Así que aquí
para .a div puntuación será de 0012
para .b puntuación será de 0011
Claramente primero gana por lo que recibe de modificar el contenido a pesar de que .b intentos para anular .a div

(O)

puede utilizar !important en la declaración para finalizar esa declaración

Fuente

2017-04-05 20:46:05

Css no anulará los valores heredados

Respuesta

Cuestiones relacionadas