層疊樣式表(Cascading Style Sheets,簡稱CSS)是一種在網站設計中使用的標記語言,用來描述HTML或XML文檔的呈現。在CSS中,樣式可以分為選擇器和聲明兩個組成部分。
CSS的疊加是指多個選擇器(包括內部樣式表、外部樣式表和內聯樣式表)的樣式規則在應用到相同HTML元素時,如何合并或疊加樣式。
CSS疊加遵循以下三個原則:
- 優先級:某些選擇器比其他選擇器更具特殊性,從而擁有更高的優先級。用于確定相同元素上的多個樣式聲明時,優先級高的聲明將覆蓋優先級低的聲明。
- 繼承:一些屬性具有繼承性,它們的值會被應用到元素的后代元素上,當父元素和子元素擁有相同屬性時,子元素會繼承父元素的屬性。
- 特殊性:特殊性是一個定量值,用于確定選擇器的優先級。它是由選擇器中不同類型的選擇器構成的值。選擇器特殊性值越高,優先級越高。
在CSS中,樣式優先級一般按照以下順序,由高到低:
- 內聯樣式(使用style屬性的元素)
- ID選擇器
- 類選擇器、屬性選擇器、偽類選擇器
- 元素選擇器、偽元素選擇器
- 通配符
如果某個元素規定了多個樣式,那么樣式優先級將按照上述順序進行判斷。例如:
body{
color: #333333;
}
#pageTitle{
color: #FF0000;
}
.header{
color: #00FF00;
}
<h1 id="pageTitle" class="header">Hello World!</h1>
在這個例子中,<h1>元素最終的字體顏色將是綠色,因為它擁有ID選擇器和類選擇器,而類選擇器相比于元素選擇器有更高的優先級。