CSS規(guī)定了選擇器的優(yōu)先級,通過優(yōu)先級規(guī)則,我們可以決定哪些樣式會被應(yīng)用在元素上。
選擇器的優(yōu)先級由四個等級組成:
1. 內(nèi)聯(lián)樣式( Inline style):1000 2. ID選擇器( ID selector):100 3. 類選擇器、屬性選擇器和偽類選擇器( Class selector, attribute selector and pseudo-class selector):10 4. 標(biāo)簽選擇器和偽元素選擇器( Type selector and pseudo-element selector):1
在一個規(guī)則集(selector)中,每個選擇器都有對應(yīng)的等級,通過它們的優(yōu)先級之和來決定哪個規(guī)則應(yīng)用。選擇器的優(yōu)先級之和最高的規(guī)則將應(yīng)用到元素上。
例如,下面這個規(guī)則的優(yōu)先級是100:
#myId { color: red; }
在下面這個規(guī)則中,它包含了一個ID選擇器和一個標(biāo)簽選擇器,所以它的優(yōu)先級是101:
#myId p { color: red; }
優(yōu)先級之和相同時,樣式的執(zhí)行順序按照最后定義的規(guī)則為準(zhǔn)。例如:
#myId { color: red; } p { color: blue; } #myId p { color: green; }
這個規(guī)則中,#myId選擇器和p選擇器的優(yōu)先級相等,但是#myId p 規(guī)則在最后定義,所以應(yīng)用到 #myId 元素上的顏色是綠色。
正確使用優(yōu)先級是很重要的。如果選擇器的優(yōu)先級太高,那么即使后來的規(guī)則定義了更多的樣式,也可能被忽略。使用標(biāo)準(zhǔn)化的方式來定義樣式,可以避免很多問題。