VUE中css样式scope和deep

一、遇到的问题

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

二、解决

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

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

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

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

相关推荐
迷雾漫步者2 小时前
React封装倒计时按钮
前端·react.js·前端框架
LCG元4 小时前
Vue.js组件开发-如何实现路由懒加载
vue.js
m0_672449604 小时前
基础vue3前端登陆注册界面以及主页面设计
前端·vue.js·elementui
匹马夕阳4 小时前
Vue3中使用组合式API通过路由传值详解
前端·javascript·vue.js
fxshy4 小时前
Vue3父子组件双向绑定值用例
前端·javascript·vue.js
LCG元4 小时前
Vue.js组件开发-如何实现表头搜索
vue.js
风茫4 小时前
如何在vue中渲染markdown内容?
前端·javascript·vue.js
蓝黑20205 小时前
从Vant图标的CSS文件提取图标文件
前端·css·python·vant
勤劳的进取家5 小时前
XML、HTML 和 JSON 的区别与联系
前端·python·算法