elementui 重写样式|scoped|什么时候样式穿透::v-deep /deep/ ＞＞＞？

本人博客

elementui 重写样式，scoped，样式穿透::v-deep 都是什么意思？

1. 前置知识：

• CSS 属性选择器
  • 基本的.class 都会使用，但是.class[xxx]就看不懂了吧？
  • XuanZeQi[xxx]其实就是属性选择器，是 CSS 的写法，和 Vue 没有任何关系。
  • 其作用是，判断选择器选中的 dom 元素有没有名为xxx的属性
  • 属性选择器详解
• data-v-hash
  • 加scoped后，vue 会给 template 中的所有写好的静态的的 dom 元素（以及this.$createElement动态生成的元素）一个没有属性值的属性名，每个组件 hash 部分各不相同，
  • 注意：不包括 DOM 动态生成的元素，不包括子组件中的元素（如 element 中的Notification 通知）
• 样式穿透
  • 添加 scoped 的 style 会给其中所有的选择器的最后加[data-v-xxxxxx]
  • 
  • 但是由 data-v-hash 的添加规则可知，并非所有的元素都有 data-v-hash
  • 所以需要样式穿透（详细的下文讲）

2. 样式穿透机制

• 写法：>>>,/deep/,::v-deep等等，需要注意不同的 CSS 预处理语言可能识别不同的规则
• scoped 机制我就不详细讲了
• 首先，默认 vue 会给选择器的最后一个选择加上[xxx]选择器，（我也不知道为什么都不加）
• 然后，如果加上了 ::v-deep之后，会阻断[xxx]的向下传递，也就是原本在末尾，现在不在末尾了，在::v-deep 处
• 而且只有第一个::v-deep生效，（所以不能写两个）
• 

3. 如果理解上面的内容的话，自然就知道怎么用了

• 总结:
  1. 加 scoped，vue 渲染时，会给 template 中静态的元素，以及this.$createElement动态生成的元素，一个没有属性值的属性名(data-v-hash)
  2. 这个属性名是 CSS 中的属性选择器，（也就是 vue 通过拼字符串的方式，来实现高级语法->浏览器可识别语法的过程）
  3. 但是有些元素没有被加上data-v-hash,所以需要样式穿透
  4. 样式穿透，实现了父子组件的样式穿透，但其本质只是，将属性选择器由末尾转移到了中间某个位置

到此结束，听懂点赞

于是又有疑问了

1. 什么时候添加的 data-v-hash？
2. 为什么只用一个属性选择器？
3. 属性选择器这种东西，我怎么都给忘了？