vue中的deep选择器

vue中的样式标签，如果使用scoped标识，它就会自动在每种样式选择器的末尾添加一个当前组件的哈希值。这样做可以避免样式穿透，实现css的组件化，但有时候也会带来困扰，我们没法覆盖自身组件以外的样式。不过vue为我们提供了可实现的路径，想要强行实现，就需要使用deep关键字。

scoped的具体工作原理这里就不赘述了。下面主要介绍一下vue场景中，less样式，deep选择器的语法。

• 写法一：:deep伪元素选择器写法，以类似伪元素选择器的方式追加在一个选择器末尾；

.config-view-tabs:deep {
  > div:first-child {
   flex: 1 1 auto;
   overflow: auto;
   padding: 0;
  }
  > div:nth-child(2) {
   flex: 0 0 auto;
  }
  > div:nth-child(1) > div {
   height: 100%;
   overflow: hidden;
  }
}

• 写法二：:deep()伪元素选择器写法，可以将一个选择器放在括号内部，同样可以实现对应的功能：

.config-view-tabs:deep(> div:first-child) {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0;
}
.config-view-tabs:deep(> div:nth-child(2)) {
    flex: 0 0 auto;
}
.config-view-tabs:deep(> div:nth-child(1) > div) {
    height: 100%;
    overflow: hidden;
}

• 写法三：:deep写法，也可以直接写成嵌套结构，但注意此时必须要在前面加上&，来表示元素自身：

.config-view-tabs {
	height: 100%;

	&:deep {
		> div:first-child {
			flex: 1 1 auto;
			overflow: auto;
			padding: 0;
		}
		> div:nth-child(2) {
			flex: 0 0 auto;
		}
		> div:nth-child(1) > div {
			height: 100%;
			overflow: hidden;
		}
	}
}