CSS是網頁設計中不可或缺的一部分，它可以讓我們在網頁中編寫樣式，為網頁添加各種視覺效果。在CSS中，樣式表是我們的主要工具，它們可以通過引用來應用到HTML文檔中。但是，如果同一個元素被不同的樣式表所引用，那么它的樣式到底是哪一個呢？這就需要了解CSS樣式表引用的優先級問題。 首先，我們需要了解，CSS樣式表的優先級是由以下幾個方面決定的： 1. 樣式表的來源：內部樣式表和外部樣式表的優先級是不同的。 2. 樣式選擇器的作用范圍：ID選擇器、類選擇器和標簽選擇器的優先級不同。 3. 樣式表的順序：在樣式表中排在后面的樣式規則優先級更高。 4. 樣式的重要性：在樣式規則后面加上!important關鍵字可以提高該樣式的優先級。 我們可以通過以下代碼來驗證這些優先級：

這是一段測試文字。

在上面的代碼中，我們為body元素、p元素和#content元素的子元素div和p都定義了不同的樣式。其中，body元素的背景色設為了紅色，而且添加了!important關鍵字，這樣它的優先級最高；p元素的文字顏色為白色；#content元素下的div元素的背景色為藍色，p元素的文字顏色也為藍色。 經過測試，我們發現最終呈現在瀏覽器中的樣式如下：

這是一段測試文字。

可以看出，p元素最終呈現的樣式并不是我們預期的白色，而是藍色。這是因為#content下的p元素的樣式優先級高于頂層的p元素樣式，所以最終呈現的樣式以#content下的p元素的樣式為準。 總結來說，當樣式表的來源、選擇器作用范圍、樣式表順序和樣式的重要性都不同的時候，CSS的優先級也會產生差異。我們需要認真分析樣式表引用的優先級問題，才能正確地在頁面上呈現我們需要的UI效果。