嵌入樣式通常覆蓋外部樣式，但實際取決于特異性、!important 和順序：同權(quán)重下后引入的生效；特異性高者優(yōu)先；含 !important 的聲明最優(yōu)先。

在CSS中，樣式的優(yōu)先級決定了當多個樣式規(guī)則作用于同一個元素時，哪一個規(guī)則會被應(yīng)用。嵌入樣式（即內(nèi)部樣式）和外部樣式表的優(yōu)先級并不是決定覆蓋關(guān)系的唯一因素，真正起作用的是樣式來源、選擇器 specificity（特異性）以及是否使用了 !important。

1. 樣式引入方式與默認優(yōu)先級順序

一般來說，瀏覽器按照以下順序處理不同來源的樣式，后面的會覆蓋前面的：

• 外部樣式表（通過 link 引入）
• 嵌入樣式（寫在 <style> 標簽中的樣式）
• 內(nèi)聯(lián)樣式（寫在元素 style 屬性中的樣式）

所以，在相同特異性的情況下，嵌入樣式會覆蓋外部樣式。

2. 特異性（Specificity）的影響

即使嵌入樣式在引入順序上靠后，如果外部樣式的選擇器更具體，它仍可能勝出。

立即學習“前端免費學習筆記（深入）”；

例如：

盡管嵌入樣式在文檔中后出現(xiàn)，但由于外部樣式的選擇器更具體（ID + 類 + 元素），它的優(yōu)先級更高，文本仍顯示為紅色。

壁紙樣機神器

免費壁紙樣機生成

0

查看詳情

3. !important 的強制覆蓋

在任意樣式聲明中使用 !important，會使其優(yōu)先級最高（除非另一個也帶 !important，此時再比特異性和順序）。

比如：

最終文字顏色是綠色，因為 !important 提升了外部樣式的優(yōu)先級。

4. 實際開發(fā)建議

為了減少樣式?jīng)_突，推薦：

• 統(tǒng)一使用外部樣式表管理樣式，避免混用嵌入樣式
• 合理規(guī)劃選擇器特異性，避免過度使用 !important
• 若必須局部調(diào)整，可使用內(nèi)聯(lián)樣式或提高選擇器權(quán)重
• 利用瀏覽器開發(fā)者工具檢查最終生效的樣式

基本上就這些。關(guān)鍵不是“嵌入”還是“外部”，而是看誰的特異性高、有沒有 !important、以及書寫順序。理解這三點，就能掌握樣式覆蓋邏輯。

以上就是css嵌入樣式與外部樣式覆蓋優(yōu)先級的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！