在開發前端頁面的過程中，添加樣式是不可避免的。然而，有時候會發現添加的樣式會與之前的樣式產生沖突，覆蓋掉原有的樣式，導致頁面布局混亂。如何避免這種情況的出現呢？

一個有效的解決方法就是利用CSS中的“權重”來控制樣式的優先級。CSS中每條規則都有一個權重值，權重值越高，越優先使用。

以下是CSS中規定的選擇器的權重值：

? ID選擇器——100
? 類選擇器、屬性選擇器和偽類——10
? 元素選擇器和偽元素——1

當然，這些是最基礎的權重值，還有一些其他的規則，例如“!important”、“內聯樣式”等，它們的權重值比上述三種選擇器都高。

舉個例子來說，如果需要對某個元素設置樣式，可以使用元素選擇器。但是如果發現這樣的樣式無法正確地顯示，很有可能是有其他更具體的選擇器權重更高，導致這個樣式被覆蓋了。

/* 普通元素選擇器 */
p {
color: red;
}
/* ID選擇器 */
#example {
color: blue; /* 這個樣式的權重值比段落樣式的權重值高 */
}

如上面的例子，當給一個段落元素設置紅色文本的時候，如果還有一個ID為“example”的元素，設置了藍色文本，就會產生樣式沖突，段落中的文本變成了藍色。

為了避免樣式沖突，我們需要提高規則的優先級。有以下幾種方式：

1. 選擇更具體的選擇器，通過類、屬性、ID來提高權重值。

2. 使用“!important”來強制使用某個樣式。

3. 具體樣式添加到已存在的選擇器上。

例如，在上面的例子中，如果使用以下代碼就可以避免樣式沖突：

/* 具有更高權重的ID選擇器 */
p#example {
color: red;
}
/* 在已存在的選擇器上添加具體樣式 */
p {
color: red;
font-size: 20px;
}

總之，要避免樣式沖突，需要小心考慮選擇器和規則的權重，以及使用“!important”和添加具體樣式的方法。這樣可以讓頁面樣式更加清晰、規范。