<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Especificidade CSS</title>
<!-- https://specificity.keegan.st -->
<style>
body{
font-size: 40px;
}
/* selecionando todas as div */
div{
background-color: blue;
}
/* selecionando as div wm-cor */
div[wm-cor]{
background-color: darksalmon;
}
/* só vai funcionar antes do div:hover */
div.estilo{ background-color: purple; }
/* ao passar o mouse irá mostrar a cor */
div:hover{ background-color: #00b; color: orangered; }
/* */
#unico1, #unico2{background-color:yellow;}
</style>
</head>
<body>
<div id = "unicol" class="estilo" style="background-color: red;"><!--esse style irá passar por cima dos outros-->
#unico1 vs .estilo vs inline
</div>
<div id="unico2" class="estilo"> #unico2 vs .estilo</div>
<div class="estilo" wm-cor>.estilo vs wb-cor</div>
<div wm-cor>wm-cor</div>
<div class="estilo">.estilo</div>
<div>elemento</div>
</body>
</html>
Nenhum comentário:
Postar um comentário