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

news2025/6/9 16:19:39

省流总结：交互时的短暂视觉反馈 → 用 :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 用于记录状态持久性，比如用户点了某一项