La regla CSS más específica no funciona

En mi código siguiente, he definido una regla más específica para h1 como #inner h1 y una regla menos específica como #container h1. Pero si #container h1 se pone después de #inner h1, entonces entra en vigencia y #inner h1 se ignora, mientras que no debe ser así porque es más específico.La regla CSS más específica no funciona

Ayúdeme a comprender el problema.

CSS:

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; }

HTML:

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

Fuente

2012-01-01 Shawn Taylor

No, '#inner h1' no es más específico que' #container h1'. Ambos tienen una especificidad de 101 (creo, http://www.htmldog.com/guides/cssadvanced/specificity/). El hecho de que un elemento esté DENTRO de otro elemento no hace que el interior sea más específico. – Charlie

@Charlie: Tenga en cuenta que no es literalmente ciento uno: 11 selectores de clase, por ejemplo, no anularán un solo selector de ID. Es más como uno-cero-uno. – BoltClock

Gracias por la aclaración – Charlie

Puede ser que su idea de especificidad esté un poco desajustada. La especificidad tiene que ser una idea libre de contexto: dado que CSS se puede cargar independientemente de HTML, no se necesita un documento HTML para adivinar qué regla es más "específica". Considere este otro ejemplo válido:

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

Con este fragmento, que tendría que ir en contra de su estimación inicial que inner debería ser más específico. Esto significa que su interpretación requiere contexto (que CSS no tiene).

El punto es que ambas reglas se ven con la misma especificidad (h1 descendientes de un elemento identificado por un id), y el selector no da mayor prioridad a los descendientes más cercanos.

En caso de que se apliquen dos reglas de igual especificidad, el ganador es el último declarado en el CSS.

Fuente

2012-01-01 06:41:07 zneak

Buena explicación – grc

Otra cosa: los combinadores no contribuyen en absoluto a la especificidad, por lo que intercambiar el espacio por un '>' no afectará a qué regla tiene prioridad, ya que ambos combinators no tienen especificidad. Ver [esta pregunta] (http://stackoverflow.com/questions/8096829/why-do-foo-bar-and-foo-bar-have-the-same-specificity-in-css) – BoltClock

-2

esto no es un problema en absoluto :) CSS análisis sintáctico de clases uno tras otro y la última regla anula anterior, por supuesto, si el anterior es no más específico o no incluye! enunciados importantes, puede poner font-size: 25px! important; en el primero para que anule la última regla; de lo contrario, simplemente cambie los lugares de las clases

Fuente

2012-01-01 06:35:43

¿Clases? ¿Qué clases? – grc

¿No es #inner h1 más específico? –

@grc, css classes lol –

Ambos tienen la misma especificidad y como usted nota, el orden en que aparecen en la hoja de estilo es el factor determinante para qué reglas de estilo se aplican .

Existen varias maneras de estructurar las reglas para obtener más especificidad, pero en general me mantendría alejado del modificador !important.

Para obtener más información, vea 6.4.3 Calculating a selector's specificity en la especificación CSS del W3.

Fuente

2012-01-01 06:38:56 steveax

¿No es #inner h1 más específico? –

También hay un útil artículo sobre la especificidad del selector (había una pregunta similar ayer), http://www.htmldog.com/guides/cssadvanced/specificity/ – Charlie

@ShawnTaylor no, esos dos tienen la misma especificidad. – steveax

La regla CSS más específica no funciona

Respuesta

Cuestiones relacionadas