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 这个类名时,应用对应样式。

bash 复制代码
.vk-select__menu-item {
  color: #333;

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

它会编译成:

bash 复制代码
.vk-select__menu-item.is-selected {
  color: var(--primary);
  font-weight: 700;
}

✔️ 用于"状态类"的显式控制(比如点击后加类名)


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

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

bash 复制代码
.vk-select__menu-item {
  &:hover {
    background-color: var(--hover-bg);
  }
}

它会编译成:

bash 复制代码
.vk-select__menu-item:hover {
  background-color: var(--hover-bg);
}

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


🎯 应用场景对比举例:

1. 下拉选项组件:

bash 复制代码
.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 提示,点击后选中变样式。

相关推荐
OpenTiny社区几秒前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽1 分钟前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js
超浪的晨20 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
CCF_NOI.3 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck6 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9496 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_6 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路9 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web