在 CSS 中引入了變量的概念，CSS 變量可以簡化代碼、提升可讀性和維護性。但在使用 CSS 變量時，我們需要了解一些關于其優先級的知識。 首先需要明確一點，CSS 變量在優先級上的表現，與普通的 CSS 屬性是相同的，即遵循“就近原則”和“權重優勝”。具體來說，CSS 變量的優先級是： 1. 行內樣式（優先級最高） 2. 內嵌樣式 3. 外部樣式表 4. 瀏覽器默認樣式表（優先級最低） 那么，當出現多個同名的 CSS 變量時，如何判斷哪個會被應用呢？需要從它們的作用域和繼承關系入手。 1. 作用域 作用域是指變量在哪個范圍內生效。在 CSS 變量中，作用域分為全局和局部兩種。 全局作用域即在根元素（:root）或者文檔頂層定義的變量。全局變量可以在整個文檔中使用，而局部作用域即在某個元素或者某個選擇器內定義的變量。局部變量只能在該元素或者其子元素中使用。 因此，在不同的作用域中，相同名稱的變量會產生不同的值。變量的作用域可以控制其在文檔中的使用范圍，可以在代碼中使用局部變量來覆蓋全局變量。 2. 繼承 繼承是指子元素從其父元素繼承屬性值。普通的 CSS 屬性可以通過繼承傳遞值，但是 CSS 變量卻不具備繼承功能。 雖然 CSS 變量不能直接繼承，但是可以通過變量名的嵌套調用來實現繼承。例如： ```CSS :root { --color-primary: blue; } .button { background-color: var(--color-primary); color: white; } .button:hover { background-color: white; color: var(--color-primary); } ``` 在上述代碼中，`.button:hover` 可以使用 `--color-primary` 的值，即藍色。這是因為，`--color-primary` 在 `:root` 中定義了，而 `.button:hover` 是 `:root` 的子元素。通過這種方式，我們可以將變量在整個文檔中進行傳遞和復用。 綜上，了解 CSS 變量的優先級和作用域、繼承等特點，有助于我們正確地使用 CSS 變量，提高代碼的可讀性、可維護性和擴展性。