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