大话前端之--论“＞＞＞”,“/deep/”和“::v-deep”深度选择器和“深入裙中”的异同

在VUE技术栈的开发中，我们经常遇到在样式设置了scoped属性后，需要通过类选择器选中外部引入的组件中的DOM元素或者希望通过类选择器选中通过innerHTML属性动态嵌入的html元素片段中的DOM元素，一般的类选择器的方式是无法生效的。

因为在webpack编译阶段，vue的模版编译插件会将每一个DOM元素及其子节点元素插入一个以"date-v-”开头的属性，结合类选择器选中元素进行渲染，从而防止样式的污染。

如果要修改样式，则需要“深入”，深入什么？你懂的。

“>>>”可以在css样式中穿透，添加了“>>>”后，在webpack编译后，会生成类似如下的样式：

[data-v-7ba5bd90] .vhtml {
    font-size: 2.5rem;
    color: #f7f768;
}

这样才会选中对应的DOM节点渲染。

如果在项目中通过scss、sass或者less等预处理器来生成css的话，“>>>”则无法识别。此时则需要使用/deep/或者::v-deep，例如下面的方式：

<style lang="scss" scoped>
/deep/ input[type="text" i] {
    padding: 7px 7px;
}
</style>

 

<style lang="scss" scoped>
::v-deep input[type="text" i] {
    padding: 7px 7px;
}
</style>

 如果是通过vue-cli3脚手架创建的项目，则建议用 ::v-deep来深入选择需要修改的DOM元素。

此时的我突然想到一个网络词语：“深入裙中”，细细品味，两者确有相似之处；“深入裙中”可以直捣黄龙；深入选择器也是深入外部组件的”裙中”，抓到目标元素。

您觉得呢？