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