1. 深色/浅色模式切换机制概述
在web开发中实现深色/浅色模式切换，通常的做法是通过javascript在<body>元素上动态添加或移除一个css类（例如light-mode或dark-mode）。这个类会触发预定义的css规则，从而改变页面的整体外观。
function myFunction() {
var element = document.body;
element.classList.toggle("light-mode"); // 切换 body 上的 light-mode 类
}上述JavaScript代码负责监听一个按钮点击事件，并在<body>元素上切换light-mode类。当light-mode类存在时，页面应呈现浅色主题；当它不存在时，页面则保持默认的深色主题。
2. 理解CSS特异性与样式冲突
深色模式切换时，部分文本颜色不生效的根本原因在于CSS的“特异性”（Specificity）规则。CSS特异性决定了当多个样式规则应用于同一个元素时，哪条规则会最终生效。特异性高的规则会覆盖特异性低的规则。
常见的导致样式冲突的情况包括：
- 元素选择器与类选择器： 类选择器（.class）的特异性高于元素选择器（p, h1）。
- ID选择器： ID选择器（#id）的特异性高于类选择器和元素选择器。
- 内联样式： 直接在HTML元素的style属性中定义的样式具有最高的特异性，通常会覆盖所有外部或内部样式表中的规则。
- 更具体的组合选择器： 例如，div p比p更具体，.container .item比.item更具体。
在深色模式的场景中，如果<body>元素被赋予了light-mode类，并定义了body.light-mode { color: black; }，但页面中的某个h1元素有自己的特定样式，例如.homepage h1 { color: white; }，那么即使在浅色模式下，h1的文本颜色仍可能保持白色，因为.homepage h1的特异性可能高于或与body.light-mode冲突，或者更直接地，body.light-mode的color属性被更具体的子元素规则覆盖。
立即学习“前端免费学习笔记（深入）”；
