无锡市建设招标网站创建网络公司

省流总结：交互时的短暂视觉反馈 → 用 :hover，状态需要记录或切换 → 用类名如 .is-selected。

🧠 本质区别：

写法	触发方式	用途
&.is-selected	依赖 class 切换	需要 JavaScript 控制状态，如选中、激活
&:hover	鼠标悬停自动触发	一般用于交互反馈，比如按钮悬停变色

---

问题：为何有时候使用 &.is-selected{ color:var(xxx); font-weight: 700; } 有时候使用&:hover{ background-color:var(xxx); }

解决：

• &.is-xxxx 是 用于状态类的显式控制（如点击后加类名）——》持久状态——》需要 js/class 控制状态

• &:hover{ ... } 用于交互状态控制（鼠标悬停、点击等）——》自动发生，临时状态——》交互反馈

CSS 预处理器（如 SCSS、Less）中的嵌套写法 和 选择器的语义区别。

我们来详细解释：

---

详解

🔹 &.is-selected { ... } 是什么？

这是写在一个组件的样式中，意思是：

当前元素拥有 is-selected 这个类名时，应用对应样式。

.vk-select__menu-item {color: #333;&.is-selected {color: var(--primary);font-weight: 700;}
}

它会编译成：

.vk-select__menu-item.is-selected {color: var(--primary);font-weight: 700;
}

✔️ 用于“状态类”的显式控制（比如点击后加类名）

---

🔸 &:hover { ... } 是什么？

这是用于伪类选择器，表示当前元素被鼠标悬停时。

.vk-select__menu-item {&:hover {background-color: var(--hover-bg);}
}

它会编译成：

.vk-select__menu-item:hover {background-color: var(--hover-bg);
}

✔️ 用于交互状态控制（鼠标悬浮、点击等）

---

🎯 应用场景对比举例：

1. 下拉选项组件：

.vk-select__menu-item {&:hover {background-color: #f0f0f0; // 鼠标悬停反馈}&.is-selected {color: var(--primary-color);  // 被选中项加颜色高亮font-weight: bold;}
}

• :hover 用于交互反馈，自动发生

• .is-selected 用于记录状态持久性，比如用户点了某一项

---

✅ 总结记忆口诀：

:hover 是临时状态
.is-selected 是持久状态（通过 JS/class 控制）

两者经常配合使用：先 hover 提示，点击后选中变样式。