CSS中.menu.change选择器的作用是什么？

• .menu.change是CSS的多类选择器，只有同时拥有.menu和.change两个类名的元素，才会应用这个选择器下的样式。它的优先级比单一的.menu选择器更高，所以能覆盖基础样式。

• 你看到元素位置从top:1rem变成top:15rem，逻辑是这样的：

  • 基础样式里.menu定义了top:1rem；
  • .menu.change里重新定义了top:15rem，当元素同时具备两个类时，这个高优先级的样式会生效，覆盖原本的top值。

• .change只是一个普通的自定义类名，和动画、特性无关，它的作用是标记元素的状态切换——比如菜单展开/收起、激活/未激活的状态。讲师肯定是打算用JavaScript来控制这个类的添加和移除：比如点击菜单按钮时，给.menu元素加上.change类，触发位置变化；再次点击时移除类，恢复初始位置，以此实现菜单的交互效果。

• 现在HTML里没看到.change类但样式生效，要么是页面里有隐藏的JS逻辑自动添加了这个类，要么是你对代码的观察有遗漏，但核心逻辑就是通过动态切换类来触发样式变化。

内容的提问来源于stack exchange，提问作者Daniel Fraga