HTML層疊效果是指當(dāng)多個(gè)CSS樣式同時(shí)作用在一個(gè)元素上時(shí)，瀏覽器會(huì)按照一定的規(guī)則來(lái)決定最終顯示哪種樣式。
在HTML中，設(shè)置CSS樣式可以通過(guò)style屬性或在CSS文件中定義類、ID、標(biāo)簽等選擇器來(lái)實(shí)現(xiàn)。不同的CSS樣式有不同的優(yōu)先級(jí)，一般來(lái)說(shuō)，越具體的選擇器優(yōu)先級(jí)越高，越后定義的樣式會(huì)覆蓋前面的樣式。
如果想要手動(dòng)設(shè)置樣式的優(yōu)先級(jí)，可以使用!important關(guān)鍵字，這樣的樣式將會(huì)覆蓋其他所有樣式。
下面是一個(gè)例子，演示了層疊效果的設(shè)置：
<style>
body {
color: red;
}
p {
color: blue;
}
p#first {
color: green;
}
.highlight {
color: yellow;
}
p.highlight#first {
color: orange!important;
}
</style>
<body>
<p id="first" class="highlight">這是一個(gè)段落</p>
</body>在上述代碼中，首先定義了body的color為red，然后定義了所有p元素的color為blue，接著定義了id為first的p元素的color為green。緊接著是一個(gè)類選擇器.highlight，它的color為yellow。
最后一行定義了一個(gè)更具體的選擇器p.highlight#first，表示同時(shí)滿足“類為highlight”、“ID為first”、“標(biāo)簽為p”的元素，在此元素上的color為orange，并且使用了!important關(guān)鍵字。
最終展示出來(lái)的結(jié)果是，“這是一個(gè)段落”字體的顏色為orange，而不是之前定義的任何一種顏色，因?yàn)樗鼭M足了最具體的樣式定義。