css 样式穿透 及 修改UI组件库样式

深度作用选择器

从官方文档了解到，我们所谓的穿透，官方叫做深度选择器。怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /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;   
     }
}

注意

引入的是第三种生效了，第一种不生效，第二种报错，不知道为什么？在此记录一下，有大神经过方便可以留言。