vue 给css 添加scope属性提升权重的原理是什么

Question

https://blog.csdn.net/margin_...
这篇文章总结的
scoped三条渲染规则

1.给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
2.在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
3.如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

问题：为什么给css选择器加上类型.icon[data-v-f61e51ba]这样的属性就会提高其权重？

Answer 1

css权重计算，class和属性选择器都相当于10，加上[data-v-f61e51ba]之后大于默认的class，达到层叠的效果

Answer 2

css选择器的叠加都会提高权重，属性选择器的权重和类选择器一样都是10。

但是使用scoped的目的并不是提高权重，而是为了选择器的唯一性