近期在開(kāi)發(fā)過(guò)程中，遇到了一個(gè)令人困擾的問(wèn)題：CSS 外部樣式中的 :root 選擇器失效了。經(jīng)過(guò)分析排查，找到了問(wèn)題的原因。
首先，我們需要明確 :root 選擇器的含義。它表示文檔的根元素，可以理解為 HTML 文檔中的<html>標(biāo)簽。因此，我們可以通過(guò) :root 選擇器來(lái)定義全局的 CSS 樣式。比如：
:root {
--color-primary: #2196F3;
}
.button {
background-color: var(--color-primary);
}上述代碼中，我們定義了一個(gè)全局顏色變量--color-primary，并在 .button 類中使用了該變量作為背景色。這樣就可以實(shí)現(xiàn)全局顏色風(fēng)格的管理，從而方便樣式的維護(hù)。
但是，在外部樣式表中使用 :root 選擇器時(shí)，可能會(huì)出現(xiàn)失效的情況。這是因?yàn)橥獠繕邮奖碇械?CSS 代碼，不會(huì)直接影響到文檔的根元素。因此，如果需要在外部樣式表中使用 :root 選擇器，我們需要先將根元素的樣式定義好，然后再引入外部樣式表。比如：
/* index.html */
<html>
<head>
<style>
:root {
--color-primary: #2196F3;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>
/* style.css */
.button {
background-color: var(--color-primary);
}上述代碼中，我們?cè)?HTML 文檔中先定義了 :root 選擇器，并將全局變量定義在其中。然后在引入外部樣式表時(shí)，樣式表中的 .button 類就可以使用全局變量了。
總之，如果遇到 CSS 外部樣式中的 :root 選擇器失效的情況，可以參考上述解決方案，先在 HTML 文檔中定義好根元素的樣式，再引入外部樣式表。當(dāng)然，如果樣式的作用范圍只是某個(gè)特定的元素，那么直接在元素選擇器中定義樣式即可。