今天突然发现一个有趣的现象
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" st