正确选择根元素的方法包括使用 html 选择器设置基础样式、结合类选择器实现条件样式、利用 :root 伪类定义全局变量。具体来说：1. 直接使用 html 选择器设置字体大小等基础样式；2. 使用 html.dark-mode 类选择器配合 javascript 实现主题切换；3. 使用 :root 定义 css 变量，提升维护效率；4. 区分 html 和 body 的作用，合理设置高度和背景以实现布局；5. 实际开发中建议统一 font-size 基准、清除默认 margin 和 padding、为变量添加注释、优先使用类名控制暗黑模式。
在网页样式设计中，很多人会直接用 html 或 body 选择器来设置全局样式，比如字体、背景色等。其实，CSS 中还有一些更灵活、也更有意思的根元素选择方式，不只是简单地选 html 标签本身。合理使用这些选择器，可以让你的样式控制更精细、更可控。
如何正确选择根元素？
根元素就是 HTML 文档中最顶层的元素，通常是 标签。最基础的选择方式是直接写：
html {
font-size: 16px;
}
这种方式没什么问题，但如果你希望在某些特定条件下才应用样式，比如某个类名存在时，就可以结合类选择器：
立即学习“前端免费学习笔记（深入）”；
html.dark-mode {
background-color: #111;
color: #eee;
}
这种写法常用于主题切换功能，通过 JavaScript 动态给 添加或移除类名，实现不同主题样式的切换。
使用 :root 伪类定义全局变量
:root 是一个伪类选择器，它始终指向文档的根元素（也就是 ），但它还有一个特别的功能：配合 CSS 自定义属性（变量）一起使用。
:root {
--primary-color: #007bff;
--spacing: 1rem;
}
这样定义的变量可以在整个项目中复用，比如：
button {
background-color: var(--primary-color);
padding: var(--spacing);
}
相比直接写死颜色和尺寸值，这种方式更易于维护，特别是在大型项目中，修改变量一处即可影响全局。
html 和 body 的区别与使用场景
虽然我们经常把 html 和 body 混着用，但实际上它们是两个不同的元素，各自有自己的默认行为和样式继承关系。
-
html 元素：
- 是整个文档的根节点
- 默认情况下它的高度是“刚好包裹住内容”
- 设置 height: 100% 后，可以让子元素（如 body）基于它做百分比布局
-
body 元素：
- 是 html 的子元素
- 浏览器默认会给它一些 margin（通常是 8px）
- 大多数页面内容都放在这里
举个常见例子：想让一个全屏背景图铺满整个视口，通常需要这样写：
html, body {
height: 100%;
margin: 0;
}
body {
background: url('bg.jpg') no-repeat center center fixed;
background-size: cover;
}
如果不设置 html 的高度为 100%，那 body 的 100% 高度就没有参考对象，可能达不到预期效果。
实际开发中的小技巧
有时候你可能会遇到一些奇怪的样式问题，比如字体大小不统一、布局错位等，其实这些问题往往和根元素的样式设置有关。
几个实用的小建议：
- 设置 html 的 font-size 作为 rem 的基准值，方便响应式设计
- 清除 html 和 body 的默认 margin 和 padding，避免浏览器差异
- 使用 :root 定义变量时，尽量加上注释说明用途，便于团队协作
- 在暗黑模式切换中，优先使用 html 上的类名而不是 data-* 属性，兼容性更好
基本上就这些。掌握好根元素的选择和使用方式，不仅能提升你的 CSS 控制力，也能让项目结构更清晰、更容易维护。
暂无评论内容