20240805 - 01 css深度选择器/穿透样式

简介：Vue3中可以在style标签中使用:deep()的方法进行样式穿透， 主要是解决在使用第三方UI库（如element-ui）时导致的对其样式设置不生效的问题

关联点

一. scoped属性

在一个Vue3组件的style标签中可以对其设置scoped属性。该属性的作用有以下三个方面：

1. 【Vue会为该组件template中定义的html元素中添加一个data-v-{一个hash值}的属性选择器】
2. 【在style标签中写的css样式Vue都会在样式选择器的最后段添加data-v-{一个hash值}的属性标签】
3. 【在使用第三方UI库时， 只会为根元素添加data-v-{一个hash值}属性，而子元素则不会添加】

简单总结：在html的标签下添加了一个属性选择器，可以根据这个属性选择器来保证各个组件的样式不被相互污染，从而实现一个模块化效果。

二. deep样式穿透

使用方法 :deep(.el-input__wrapper) { background-color:red }

:deep()函数会把属性选择器放在最前面

在 Vue3 中，当使用一些第三方的 UI 库时，由于 Vue3 实现了模块化封装，那么再设置 UI 库的 CSS 样式时有时会出现设置不成功的问题，那么这个时候可以考虑使用 :deep() 来进行样式穿透。