Scribd
Cargar
32 vistas1 página

Ejercicios Css - Importante Ev - 1

El ejercicio analiza un código HTML con varias declaraciones CSS y requiere determinar la puntuación de especificidad, la regla ganadora y el color del texto resultante. Las puntuaciones de especificidad se calculan según la jerarquía de selectores, donde las reglas más específicas prevalecen. El resultado final del color del texto dependerá de la regla ganadora con mayor especificidad y, en algunos casos, del uso de '!important'.

Cargado por

Silvia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
32 vistas1 página

Ejercicios Css - Importante Ev - 1

El ejercicio analiza un código HTML con varias declaraciones CSS y requiere determinar la puntuación de especificidad, la regla ganadora y el color del texto resultante. Las puntuaciones de especificidad se calculan según la jerarquía de selectores, donde las reglas más específicas prevalecen. El resultado final del color del texto dependerá de la regla ganadora con mayor especificidad y, en algunos casos, del uso de '!important'.

Cargado por

Silvia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

EJERCICIO

Supongamos que tenemos el siguiente código HTML:

<div> <!—Ejemplo->
<div class="destacado">
<p> Especificidad en CSS.</p>
</div>
</div>

Si en un archivo css tenemos las siguientes declaraciones, determinar cuál es la


puntuación por especificidad cuando proceda, cuál es la regla ganadora, de qué color se
visualizará el texto y por qué:

Declaraciones Puntuación especificidad Regla ganadora, color del


texto y por qué

body {color: grey;}


body div.destacado p {color:
cyan;}
.destacado {color: green;}
div.destacado {color: blue;}
div.destacado p {color: yellow;}
div:first-child {color: magenta;}

body {color: grey;}

body {color: grey;}


.destacado {color: green;}

body div.destacado p {color:


cyan;}
.destacado {color: green
!important;}

body div.destacado p {color:


cyan;}
.destacado {color: green;}
p {color: blue;}

body div.destacado p {color:


cyan;}
.destacado {color: green;}
p {color: blue !important;}

También podría gustarte