一、問題引出

　　一段代碼

<h1 class = "blue" id = "title">article</h1>

　　在CSS中使用不同的選擇器對文字的顏色進行設置。

h1{
    color:red;
}
.blue{
    color:blue;
}
#title{
    color:yellow;
}

　　最終的字體顏色是黃色，當然也可以嘗試把3種設置順序顛倒查看效果。

二、問題答案

　　元素采用了某種排序機制，在這一機制種，id選擇器優於類選擇器，而類選擇器又優於標簽選擇器，因此最後字體顯示為黃色。這一類機制就稱為優先級機制。

三、總結

　　常見選擇器的優先級排序（低到高）

　　1.通用選擇器。如*{...}

　　2.標簽選擇器。如h1{...}

　　3.類選擇器。如.blue{...}

　　4.偽類選擇器。如a:hover{...}、li:first-child{...}

　　5.ID選擇器。如#title{...}

CSS選擇器優先級總結