更复杂的特异性例子

Created: November-22, 2018

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>

文本的边框，颜色和字体大小是多少？

字体大小：

font-size: 24;，因为 #elmnt1 规则集对于所讨论的 <div> 具有最高的特异性，所以这里的每个属性都被设置。

边界：

border: 3px dotted red;。边界颜色 red 取自 #elmnt1 规则集，因为它具有最高的特异性。边框，边框粗细和边框样式的其他属性来自 div 规则集。

背景颜色：

background-color: green;。background-color 设置在 div，body.mystyle > div.myotherstyle 和 .mystyle .myotherstyle 规则集中。特征是（0,0,1）与（0,2,2）与（0,2,0），因此中间的一个胜利。

颜色：

color: red;。颜色在 div 和 .mystyle .myotherstyle 规则集中设置。后者具有较高的特异性（0,2,0）和胜利。