VUE中css样式scope和deep

一、遇到的问题

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

二、解决

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

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

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

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

相关推荐
cc.ChenLy1 天前
浏览器缓存机制详解:如何彻底解决前端代码更新后的缓存问题
前端
XTTX1101 天前
Vue3+Cesium电子围栏效果
前端·javascript·vue.js
KevinWang_1 天前
AI 基础设施及其应用
前端
AIFarmer1 天前
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次。
前端·npm·node.js
小红的布丁1 天前
Redis 集群详解:主从哨兵和切片集群有什么区别
前端·数据库·redis
Ruihong1 天前
你的 Vue 3 defineProps(),VuReact 会编译成什么样的 React?
vue.js·react.js·面试
小高0071 天前
🔥前端性能内卷终点?Signals 正在重塑我们的开发习惯
前端·javascript·vue.js
周末也要写八哥1 天前
HTML网页设计入门之“做前端”的基本思路
前端·html
VelinX1 天前
【个人学习||vue】
前端·vue.js·学习
禅思院1 天前
前端性能优化:从“术“到“道“的完整修炼指南
前端·性能优化·前端性能优化·分层优化模