选择器的特殊性

by cyning sun

HTML

<div id="c1">
    <div id="c2">
        <div id="content" class="con">注意背景颜色</div>
    </div>
</div>

CSS

div {
        width: 100px;
        height: 100px;
    }
    #c1 #c2 div.con {     /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */
        background-color: yellow;
    }
    div {                 /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
        background-color: black;
    }
    #c2 div {             /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */
        background-color: blue;
    }
    #c2 #content {        /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */
        background-color: red;
    }