CSS層疊樣式是指同一元素的不同樣式規則和不同元素的有關樣式規則在多個樣式表中的優先級的決定順序。
選擇器 { 屬性1:值1; 屬性2:值2; }
樣式規則有三個要素:選擇器、屬性和值。選擇器指明了要應用樣式規則的元素,每個選擇器都會被分配一個優先級值。當一片樣式表中的選擇器匹配了同一個元素時,CSS會比較它們的優先級值,高優先級的選擇器會覆蓋低優先級的選擇器所定義的樣式規則。
優先級是根據選擇器中ID屬性值出現的次數、類屬性值和屬性選擇器(例如[type="radio"])出現的次數以及元素選擇器出現的次數來計算的。ID選擇器的優先級最高,為100,其他選擇器的優先級根據它們的類型和數量而分別計算。例如,如果一個樣式表中包含一個ID選擇器,另一個樣式表中包含一個類選擇器,那么ID選擇器的優先級將高于類選擇器的優先級。
樣式規則僅在包含它們的樣式表中生效。如果多個樣式表中包含應用于同一元素的相同規則,則最后一個樣式表中的規則將生效。例如,如果一個樣式表中包含以下規則:
.myclass { color:blue; }
另一個樣式表中包含以下規則:
.myclass { color:red; }
則顏色將會是紅色,因為最后一個樣式將覆蓋之前的樣式。
你也可以指定一個!important關鍵字來對某個樣式規則的優先級進行提升,相當于給這個規則賦予了一個極高的優先級。
示例:
.myclass { color:red!important; }
這個規則會覆蓋所有其他的樣式,包括ID選擇器和內聯樣式。