VUE中css样式scope和deep

一、遇到的问题

子组件里明明加了hover样式,但是效果没有出来

二、解决

如下截图,父组件里使用了deep

deep是 Vue.js 提供的特殊选择器,用来突破 scoped 样式的作用域限制,允许父组件的样式影响到子组件中的元素以及再下层级子组件的样式。

默认情况下,scoped 样式只能影响当前组件内部的元素,而 :deep 可以让样式跨越组件边界,作用于子组件的内部元素。

父组件里没有hover样式,覆盖了子组件的hover样式,这样子组件里明明加了hover样式,但是效果没有出来。

相关推荐
转转技术团队18 小时前
WebNN:让 AI 推理在浏览器中“零距离”运行
前端
刀法如飞18 小时前
TypeScript 数组去重的 20 种实现方式,哪一种你还不知道?
前端·javascript·算法
IT_陈寒18 小时前
Vite热更新失效?你可能漏了这个小细节
前端·人工智能·后端
海石18 小时前
面试官:说一下你现在使用的 AI IDE,什么,JoyCode 是什么?
前端·ai编程
彩票管理中心秘书长19 小时前
一次搞懂:在Vue里用Showdown渲染Markdown+KaTeX数学公式
前端
m0_7381207219 小时前
应急响应(重点)——记一次某公司流量应急溯源分析(附带下载链接)
服务器·前端·数据库·安全·web安全·网络安全
前端Hardy19 小时前
pnpm 11.0 正式登场:安装起飞、安全拉满、彻底告别 npm 依赖
前端
PILIPALAPENG19 小时前
第4周 Day 1:智能体记忆系统——给 Agent 一个"大脑"
前端·人工智能·python
_风满楼19 小时前
TDD实战-会议室冲突检测的红绿重构循环
前端·javascript·算法
Rkgua19 小时前
JS中的惰性函数基本介绍
前端·javascript