更復雜的特異性例子

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）和勝利。