Prioridades CSS

Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>

  1. #caja header h1 { color: blue; } Puntuación = 0,1,0,2
    A=0 Estilos de línea
    B=1 Id
    C=0 Clases
    D=2 Marcas

  2. #caja .cabecera h1 { color: red; } Puntuación = 0,1,1,1
    A=0
    B=1
    C=1
    D=1

  3. header h1 { color: lime; } Puntuación = 0,0,0,2
    A=0
    B=0
    C=1
    D=0

  4. h1 { color:purple; } Puntuación = 0,0,0,1
    A=0
    B=0
    C=0
    D=1

Por tanto, el estilo que resulta de aplicar estas reglas sería el número 2

Volver