正确选择根元素的方法包括使用 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> 标签。最基础的选择方式是直接写：
html {
font-size: 16px;
}这种方式没什么问题，但如果你希望在某些特定条件下才应用样式，比如某个类名存在时，就可以结合类选择器：
立即学习“前端免费学习笔记（深入）”；
html.dark-mode {
background-color: #111;
color: #eee;
}这种写法常用于主题切换功能，通过 JavaScript 动态给 <html> 添加或移除类名，实现不同主题样式的切换。
:root 伪类定义全局变量:root 是一个伪类选择器，它始终指向文档的根元素（也就是 <html>），但它还有一个特别的功能：配合 CSS 自定义属性（变量）一起使用。
:root {
--primary-color: #007bff;
--spacing: 1rem;
}这样定义的变量可以在整个项目中复用，比如：
button {
background-color: var(--primary-color);
padding: var(--spacing);
}相比直接写死颜色和尺寸值，这种方式更易于维护，特别是在大型项目中，修改变量一处即可影响全局。
虽然我们经常把 html 和 body 混着用，但实际上它们是两个不同的元素，各自有自己的默认行为和样式继承关系。
html 元素：
height: 100% 后，可以让子元素（如 body）基于它做百分比布局body 元素：
html 的子元素举个常见例子：想让一个全屏背景图铺满整个视口，通常需要这样写：
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 控制力，也能让项目结构更清晰、更容易维护。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
859
收藏
