VUE中css样式scope和deep

一、遇到的问题

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

二、解决

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

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

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

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

相关推荐
苏武难飞几秒前
分享一个33号远征队的效果!
前端
鹏程十八少22 分钟前
4.Android 30分钟手写一个简单版shadow, 从零理解shadow插件化零反射插件化原理
android·前端·面试
亿元程序员29 分钟前
这款值68亿的游戏,你不实战一下吗?安排!
前端
摸鱼的春哥1 小时前
Agent教程15:认识LangChain(中),状态机思维
前端·javascript·后端
明月_清风1 小时前
告别遮挡:用 scroll-padding 实现优雅的锚点跳转
前端·javascript
明月_清风1 小时前
原生 JS 侧边栏缩放:从 DOM 监听到底层优化
前端·javascript
万少10 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站12 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名15 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫15 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter