CSS - html和:root

1. html元素概述

• html元素是 HTML 文档的根元素
• 可以直接为html元素设置 CSS 样式，这些样式会影响整个文档:

html {
    font-family: Arial, sans - serif;
}

2. :root伪类介绍

:root伪类在 CSS 中用于匹配文档的根元素，在 HTML 文档中，它实际上也指向html元素。不过，:root伪类有一个重要的特点，它具有更高的特异性（specificity），并且它主要用于定义全局的 CSS 变量。例如：

   :root {
       --primary-color: #007bff;
       --secondary-color: #6c757d;
   }
   button {
       background-color: var(--primary-color);
       color: white;
       border: 1px solid var(--secondary-color);
   }

3. 与html元素在样式方面的区别

虽然:root和html在 HTML 文档中都指向根元素，但在样式优先级和使用场景上有一些区别。:root主要用于定义全局变量，其特异性稍高一些；而html元素用于设置整个文档的基础样式，如字体、背景颜色等。在实际应用中，一些开发者更倾向于使用:root来定义变量，然后通过html元素来应用一些基本的、与文档整体相关的样式。
这样的写法可以更好地组织样式代码，将变量定义和实际应用分开，并且利用了:root的特性来确保变量的全局可用性。

   :root {
       --body-bg-color: #f8f9fa;
   }
   html {
       background-color: var(--body-bg-color);
   }