您现在的位置是:首页 > Javascript
当前栏目
css深度选择器deep
2023-03-31 10:44:03 时间
1.为什么要有deep
-
1.当我们给组件设置scoped的时候,此时我们组件的css样式只会对自己的内容生效,不会对子组件里面的内容生效。
<style lang="scss" scoped>
.login-page {
min-height: 100vh;
background: url(@/assets/login-bg.svg) no-repeat center / cover;
display: flex;
align-items: center;
justify-content: space-around;
.el-card {
width: 420px;
/* 这个选择器不生效 */
.el-card__header {
height: 80px;
background: rgba(114, 124, 245, 1);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
}
}
.el-form {
padding: 0 20px;
}
.tc {
text-align: center;
}
}
</style>
顶部没有效果
-
2.deep作用: 深度选择器(也有少数人叫穿透选择器)
-
让父组件向下影响到
子组件内部的样式
-
-
3.deep语法
-
::v-deep (scss)
-
/deep/ (less)
-
.el-card {
width: 420px;
/* 深度选择器 */
::v-deep .el-card__header {
height: 80px;
background: rgba(114, 124, 245, 1);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
}
}
deep使用小结
1.deep作用:让父组件向下影响到
子组件内部的样式
2.deep应用场景:如果组件没有设置scoped,则vue就不会加自定义属性。你的css选择器会对当前页面任何元素生效,自然就需要deep了。
(1)父组件使用了scoped
(2)在父组件中想要修改子组件内部的样式 (注意
不是子组件自己
哈,而是子组件内部的样式(子组件的子组件)
。因为子组件就在父组件里面是可以修改的。 )
相关文章
- HarmonyOS自定义组件之图层的使用
- 微软 Windows 11 天气小组件将重新出现在任务栏中:实时显示动态天气
- HarmonyOS 自定义组件之上拉抽屉
- ArkUI转场动画的使用—学习笔记
- Firefox 火狐浏览器 2021 最受欢迎扩展公布,中国用户访问量排第一
- OpenHarmony 源码解析之图形子系统(UI)
- 从HarmonyOS SDK根本上解决TextInput(输入框)不识别飘红的问题
- 基于ArkUI的渐变色盘—容器组件的学习分享(中)
- 基于ArkUI的渐变色盘—容器组件的学习分享(下)
- 基于ArkUI的渐变色盘—容器组件的学习分享(上)
- 经典Windows组件大翻新!Windows 11新版记事本官宣
- 浏览器和 Node.js 的 EventLoop 事件循环机制知多少?
- Windows11这鸡肋功能太烦人?教你关闭系统小组件
- Windows 11小组件:你需要知道的一切
- HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
- HarmonyOS自定义组件之分页功能组件封装实例
- 微软:2022年将重点解决Windows性能低下的问题
- HarmonyOS ArkUI之仿微信朋友圈图片预览
- Django3 使用 WebSocket 实现 WebShell
- 分库分表实战之订单业务完整梳理