CSS 疊層規(guī)則是前端開發(fā)者必須要掌握的重要概念，這個規(guī)則決定了當多個 CSS 規(guī)則同時應(yīng)用于同一個 HTML 元素時，哪個規(guī)則會覆蓋另一個規(guī)則。下面讓我們來看一下 CSS 疊層規(guī)則中的優(yōu)先級問題。 優(yōu)先級是 CSS 規(guī)則中一項非常重要的概念。它決定了一個規(guī)則的重要程度，以便其他規(guī)則可以根據(jù)其來應(yīng)用樣式。通常，不同的選擇器對應(yīng)不同的優(yōu)先級，優(yōu)先級的計算方法如下： 首先，我們把所有的選擇器分為三類，分別是行內(nèi)樣式表（style）、ID 選擇器和類、偽類和屬性選擇器（class，:hover、:before等）以及元素和偽元素選擇器（div、p、:after等）。然后我們給每一種選擇器賦一個優(yōu)先級值，優(yōu)先級按照下列原則進行計算： 行內(nèi)樣式表擁有最高優(yōu)先級，即1000。 ID 選擇器擁有第二高的優(yōu)先級，即100。 類、偽類和屬性選擇器和元素、偽元素選擇器具有相同的優(yōu)先級，均為1。 在規(guī)則應(yīng)用時，如果兩個規(guī)則具有相同的優(yōu)先級，則后面的規(guī)則會覆蓋前面的規(guī)則。如果兩個規(guī)則中一個的選擇器優(yōu)先級更高，則它的樣式將被應(yīng)用于目標元素。如果兩個規(guī)則中選擇器優(yōu)先級相同，則選擇器中更具體的規(guī)則會覆蓋不太具體的規(guī)則。 具體來說，以以下 CSS 代碼為例： pre { color: red; } body pre { color: green; } div pre { color: blue; } 在此例中，pre元素內(nèi)的文本應(yīng)該是什么顏色呢？答案是紅色。這是因為第一個選擇器具有最高的優(yōu)先級，因此它的顏色值將始終應(yīng)用于此元素。 接下來，讓我們再來看一個更復(fù)雜的例子： div p { color: red; } p { color: green; } .classname p { color: blue; } 在此例中，如果一個段落元素同時出現(xiàn)在一個 div 元素中和具有某個類的元素中，那么該元素的文本顏色將是什么顏色呢？答案是藍色。這是因為第三個選擇器具有最高的優(yōu)先級，其次是第一個選擇器，而第二個選擇器的優(yōu)先級最低。 總結(jié)起來，CSS 疊層規(guī)則的優(yōu)先級可以根據(jù)選擇器類型、特殊性和代碼的出現(xiàn)順序來計算。掌握這個規(guī)則并合理地運用它，有助于開發(fā)者更有效地控制網(wǎng)頁的樣式。