CSS中的層疊是指在同一個(gè)元素上存在多個(gè)樣式規(guī)則時(shí)，瀏覽器根據(jù)一定的規(guī)則來確定最終該元素的樣式如何呈現(xiàn)。

div {
font-size: 14px;
color: red;
font-weight: bold;
}
div {
color: blue;
}

在上面的代碼中，我們給div元素設(shè)置了兩個(gè)樣式規(guī)則，其中第一個(gè)規(guī)則設(shè)置了字體大小、顏色和字體加粗，第二個(gè)規(guī)則僅僅更改了字體的顏色。

當(dāng)該元素被渲染時(shí)，最終會(huì)采用哪個(gè)樣式呢？實(shí)際上，瀏覽器會(huì)按照一定的規(guī)則進(jìn)行樣式的層疊，通常的規(guī)則如下：

• 權(quán)重：擁有更高權(quán)重的樣式會(huì)覆蓋擁有低權(quán)重的樣式
• 后來居上：后面的樣式會(huì)覆蓋前面的樣式
• 屬性重要性：對(duì)于同一屬性值，被聲明為!important的樣式會(huì)覆蓋其他樣式
• 來源：來自用戶樣式表和高優(yōu)先級(jí)