<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: brown
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>que color seria</h1>
</body>
</html>
Entender especificidad es muy importante, sobre todo porque suele pasarnos que escribimos algún estilo y vemos que por alguna razón no se aplica. Esto es muy normal que pase y acabamos poniéndole un
!important
(que por cierto, es mala práctica usar !important) tiene la mayor jerarquía
style
colocar este atributo tendria una especificidad de 1000
#ID los id´s tiene una especificidad de 100
Clases, atributos y pseudoclases tiene una especificidad de 10
Elementos y pseudoelementos tiene una especificidad de 1
**Selector universal *** tiene una especificidad de 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#azul {
color: blue;
}
.rojo {
color: red;
}
</style>
</head>
<body>
<div id="azul" class="rojo">que color seria</div>
</body>
</html>