VUE中css样式scope和deep

一、遇到的问题

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

二、解决

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

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

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

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

相关推荐
檀越剑指大厂16 小时前
【Nginx系列】Tengine:基于 Nginx 的高性能 Web 服务器与反向代理服务器
服务器·前端·nginx
程序定小飞16 小时前
基于springboot的学院班级回忆录的设计与实现
java·vue.js·spring boot·后端·spring
是你的小橘呀16 小时前
深入理解 JavaScript 预编译:从原理到实践
前端·javascript
攀小黑16 小时前
基于若依-内容管理动态修改,通过路由字典配置动态管理
java·vue.js·spring boot·前端框架·ruoyi
uhakadotcom16 小时前
在使用cloudflare workers时,假如有几十个请求,如何去控制并发?
前端·面试·架构
风止何安啊16 小时前
栈与堆的精妙舞剧:JavaScript 数据类型深度解析
前端·javascript
用户479492835691517 小时前
Chrome DevTools MCP:让 AI 助手直接操作浏览器开发工具
前端·javascript·chrome
Rysxt_17 小时前
Vuex 教程 从入门到实践
前端·javascript·vue.js
by__csdn17 小时前
Node.js版本与npm版本的对应关系
前端·npm·node.js
AI_567817 小时前
Webpack性能优化终极指南:4步实现闪电打包
前端·webpack·性能优化