在前端開發(fā)中，CSS 樣式是非常重要的一部分。CSS 樣式包括了諸如顏色、大小、位置、字體等一系列元素。在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要許多不同的樣式應(yīng)用在同一個(gè)元素上。那么，當(dāng)我們應(yīng)用了多個(gè)樣式時(shí)，這些樣式是如何‘互相競(jìng)爭(zhēng)’的呢？

p {
color: blue;
color: red;
font-size: 20px;
font-size: 10px;
}

上面是一個(gè)簡(jiǎn)單的例子。我們給p標(biāo)簽定義了兩個(gè)屬性，顏色和字體大小。這兩個(gè)屬性都被定義了兩次，并分別被賦予了不同的值。那么這個(gè)標(biāo)簽最終將會(huì)被渲染成什么樣呢？

答案是：p標(biāo)簽的顏色將是紅色，字體大小將是 20px。

p {
border: 2px solid black;
padding: 10px;
margin: 20px;
background-color: white;
}

再看一個(gè)例子。這里我們?yōu)?em>p標(biāo)簽定義了邊框、內(nèi)邊距、外邊距和背景色。同樣地，這些屬性都被定義了兩次。這時(shí)，p標(biāo)簽將怎么樣呢？

這里值得注意的是，邊框、內(nèi)邊距和外邊距的值都是有限制的。它們不會(huì)在超過一定的限制值之后繼續(xù)擴(kuò)展。因此，在這個(gè)例子中，邊框的寬度將會(huì)是 2px，內(nèi)邊距和外邊距將會(huì)是 10px 和 20px，這是因?yàn)樗鼈兌际亲詈笠淮伪欢x的值。

由此我們可以看出，當(dāng)多個(gè)樣式被應(yīng)用到同一個(gè)標(biāo)簽上時(shí)，最后一次定義的值將會(huì)覆蓋之前的值。這就是樣式層疊的規(guī)則。