使用UI框架时 css不生效 使用/deep/完美解决避免污染全局样式

使用UI框架时 css不生效 完美解决避免污染全局样式

使用前端UI框架时 在页面上单独修改css 但是不生效 都是在 <style scoped> </style>这样的模式下修改 依然不生效 后来尝试了几种方法 找到了 一种最有效的方式

• 修改前 css不生效 主要是想把 tab 修改为主题色黄色 但是他现在用的是本身ui框架统一的黑色皮肤

	
	/* 修改tab切换原生的样式 */
	.gui-segmented-control{
		background-color:#F8F8F8;
		 padding:0rpx;
	} /* 外层主体 */
	
	.gui-segmented-control-item{
		color:#999999; 
		font-size:12px; 
		line-height:30px;
	} /* 项目标题 */
	
	.gui-segmented-current{
		background-color:#FFD524; 
		color:#000000;
		line-height: 30px;
	} /* 激活样式 */

• 加上 /deep/ 后生效

	/* 修改tab切换原生的样式 */
	/deep/.gui-segmented-control{
		background-color:#F8F8F8;
		 padding:0rpx;
	} /* 外层主体 */
	
	/deep/.gui-segmented-control-item{
		color:#999999; 
		font-size:12px; 
		line-height:30px;
	} /* 项目标题 */
	
	/deep/.gui-segmented-current{
		background-color:#FFD524; 
		color:#000000;
		line-height: 30px;
	} /* 激活样式 */

/deep/ 的主要用法

/deep/的意思大概为深入的，深远的。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。