CSS Esempio di specificità più complesso


Esempio

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>

Quali sono i bordi, i colori e le dimensioni dei caratteri del testo?

dimensione del font:

font-size: 24; , poiché la #elmnt1 regole #elmnt1 ha la specificità più alta per il <div> in questione, ogni proprietà qui è impostata.

confine:

border: 3px dotted red; . Il colore del bordo red è preso dal set di regole #elmnt1 , poiché ha la massima specificità. Le altre proprietà del bordo, dello spessore del bordo e dello stile del bordo provengono dalla serie di regole div .

colore di sfondo:

background-color: green; . Il background-color è impostato nelle serie di body.mystyle > div.myotherstyle div , body.mystyle > div.myotherstyle e .mystyle .myotherstyle . Le specificità sono (0, 0, 1) contro (0, 2, 2) vs. (0, 2, 0), quindi il medio "vince".

colore:

color: red; . Il colore è impostato in entrambi i .mystyle .myotherstyle regole div e .mystyle .myotherstyle . Quest'ultimo ha la specificità più alta di (0, 2, 0) e "vince".