深度作用选择器
从官方文档了解到,我们所谓的穿透,官方叫做
深度选择器
。怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者/deep/
或者::v-deep
。官方还说>>>可能存在问题,建议用后两者,我们用的less
,就选择/deep/
好了,于是我们加回刚在style中删除的scoped属性,并修改为如下代码:
vue less样式穿透实现
<style lang="less" scoped>
.van-circle {
/deep/ .van-circle__text {
color: blue;
}
}
</style>
css去除已有的背景颜色
在已经设置好背影颜色上加上
background-color:transparent !important;
背景图片固定不随滚动条滚动
background-attachment:fixed !important;
css 样式穿透实例
要求
去掉UI组件库 自带样式
1.去掉导航栏背景颜色
2.改变字体大小
3.改变字体颜色
/deep/ .u-navbar__content{
background-color: transparent !important;
.u-navbar__content__title{
font-size: 36rpx;
font-weight: 700;
color: #FFFFFF !important;
}
.u-navbar__content__left {
.u-icon--right{
.uicon-arrow-left{
font-size: 50rpx !important;
font-weight: 700 !important;
color: #FFFFFF !important;
}
}
}
}
效果
vue sass样式穿透实现
有三种实现方式
// 第一种 >>>
.my-el-form-item{
& >>> .el-form-item__content{
line-height:12px;
}
}
//第二种 /deep/
.my-el-form-item{
/deep/ .el-form-item__content{
line-height:12px;
}
}
// 第三种::v-deep 和第二种类似
.my-el-form-item{
::v-deep .el-form-item__content{
line-height:12px;
}
}
注意
引入的是第三种生效了,
第一种不生效,第二种报错
,不知道为什么?在此记录一下,有大神经过方便可以留言。