CSS 中選擇器的優先級是決定瀏覽器會應用哪條規則的指南。考慮到多個規則可能會匹配同一個元素,所以需要一個系統來定義優先級,以便瀏覽器可以決定哪些規則將使用,哪些規則將被忽略。
選擇器優先級是如何計算的呢?CSS 規范將每個選擇器分成四個等級 (也被稱為“權重”):
- 行內樣式 (0,0,1,0)
- ID 選擇器 (0,1,0,0)
- 類選擇器、屬性選擇器和偽類 (0,0,1,0)
- 元素選擇器和偽元素 (0,0,0,1)
這些數字表示一個選擇器在每個等級中的匹配數。例如,一個選擇器如 .example 是一個類選擇器,將在第 3 個等級 (0,0,1,0)中匹配一次,這意味著它的優先級低于一個 ID 選擇器 (0,1,0,0)。
由于行內樣式具有最高優先級,所以它將覆蓋同一元素上的所有其他選擇器。這意味著如果您為元素設置了行內樣式,則具有與同一元素上其他選擇器相同的規則的類選擇器或元素選擇器不會應用。請注意,這只是在同一元素上的其他選擇器。
但是,盡管行內樣式可能會使您的 CSS 更難以管理,但它仍然有其用途。例如,如果您需要根據運行時用戶輸入或瀏覽器協議來更改樣式,則行內樣式是一種常見的解決方案。
<div id="example" style="background-color: red;"> This text has a red background. </div>
在上面的示例中,我們為一個具有 ID example 的 div 元素設置了行內樣式,將其背景顏色設置為紅色。任何在同一元素上的 CSS 規則,即使它們都具有 ID 或類選擇器,也將無法覆蓋這個行內樣式。
盡管行內樣式很難管理,但它仍然是一個有用的工具,可讓您在需要時僅覆蓋 CSS 規則,而無需更改整個 CSS。但是,嘗試盡可能避免使用它,以使您的樣式表更易于維護和管理。