CSS Ejemplo de especificidad más compleja.


Ejemplo

div {
    font-size: 7px;
    border: 3px dotted pink;
    background-color: yellow;
    color: purple;
}

body.mystyle > div.myotherstyle {
    font-size: 11px;
    background-color: green;
}

#elmnt1 {
    font-size: 24px;
    border-color: red;
}

.mystyle .myotherstyle {
    font-size: 16px;
    background-color: black;
    color: red;
}
<body class="mystyle">
    <div id="elmnt1" class="myotherstyle">
        Hello, world!
    </div>
</body>

¿Qué bordes, colores y tamaño de fuente será el texto?

tamaño de fuente:

font-size: 24; , dado que #elmnt1 reglas #elmnt1 tiene la mayor especificidad para el <div> en cuestión, todas las propiedades aquí se establecen.

frontera:

border: 3px dotted red; . El red color del borde se toma del conjunto de reglas #elmnt1 , ya que tiene la mayor especificidad. Las otras propiedades del borde, grosor de borde y estilo de borde son del conjunto de reglas div .

color de fondo:

background-color: green; . El background-color se establece en los conjuntos de body.mystyle > div.myotherstyle div , body.mystyle > div.myotherstyle y .mystyle .myotherstyle . Las especificidades son (0, 0, 1) vs. (0, 2, 2) vs. (0, 2, 0), por lo que el medio "gana".

color:

color: red; . El color se establece en los conjuntos de reglas div y .mystyle .myotherstyle . Este último tiene la especificidad más alta de (0, 2, 0) y "gana".