css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如，何时用 &.is-selected{ ... } 何时用 &:hover{...}？

省流总结：交互时的短暂视觉反馈 → 用 :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 提示，点击后选中变样式。