今天突然發現一個有趣的現象
document.querySelector(':root') === document.documentElement
第一次知道:root是在使用css變量的時候，當時的寫法是:root後的花括號裏面聲明的變量，如下：
:root {
--rect-width: 4px;
}根據MDN的描述：
:root 這個 CSS 僞類匹配文檔樹的根元素。對於 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。爲了驗證:root和html的優先級,我做了以下測試：
:root {
--rect-width: 4px;
}
html {
--rect-width: 6px;
}結果
再驗證一下:root和內聯樣式的優先級
<html lang="en" style="--rect-width: 5px;">
:root {
--rect-width: 4px;
}結果
還是內聯樣式的優先級比較高
所以得出結論：
內聯樣式>:root選擇器>html選擇器不過我們發現另一個現象，兩種獲取變量的值得結果不一樣，一個是“4px”,一個是“”，這是爲什麼呢？難道document.documentElement.style只能用來獲取內聯樣式的值嗎？我們再做個試驗，用js設置他的值，然後再用兩種方式獲取。
<html lang="en" style="--rect-width: 5px;">
document.documentElement.style.setProperty('--rect-width', '7px');結果
發現
1.當有內聯樣式或者js設置的值時：document.documentElement.style.getPropertyValue獲取到的是實際的值
2.當只有:root選擇器或者html選擇器時，document.documentElement.style.getPropertyValue獲取到的值爲空結論
1.document.documentElement.style只能獲取內聯屬性的值
(根據參考鏈接2，style確實只能獲取內聯樣式的屬性)
2.js設置的優先級大於內聯樣式優先級，這也是理所應當的
另外，我們還發現，獲取到的值包含空格。js設置時，值的字符串沒有空格，獲取到的也沒有空格。
再做個試驗，js設置如果前後也設置空格的話也會獲取到空格。
再做實驗，前後分別設置兩個空格時，獲取到的值只有一個空格。
document.documentElement.style.setProperty('--rect-width', ' 7px ');
結果
內聯樣式、:root選擇器、html選擇器也都是會把多餘空格變成一個空格。
結論
js設置值、內聯樣式、:root選擇器、html選擇器也都是會把多餘空格變成一個空格。應該是類似於html頁面的元素會把多餘空格變成一個空格。
針對四種方式對css變量賦值和取值時，最終結論:
1.document.querySelector(':root') === document.documentElement
2.優先級： js設置值>內聯樣式>:root選擇器>html選擇器
3.document.documentElement.style.getPropertyValue只能獲取內聯樣式的值
4.getComputedStyle(document.documentElement).getPropertyValue獲取到的始終是實際的值
5.四種方式賦值時，如果值包含多個空格，都是總會把多餘空格變成一個空格。應該是類似於html頁面的元素會把多餘空格變成一個空格。
參考鏈接：
1.MDN之:root https://developer.mozilla.org...:root
2.MDN之style https://developer.mozilla.org...
3.張鑫旭大大之getComputedStyle https://www.zhangxinxu.com/wo...