CSS的样式优先级权重

CSS 样式的权重是指一个元素最终样式的确定方式。当多个样式定义涉及到同一个元素时，需要使用样式权重确定最终样式。

• 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、浏览器的默认样式、权重值为0
• 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
• 类，伪类和属性选择器，如： .content、:hover、[data-v-7668812d] 权重值为10
• ID选择器，如：#content，权重值为100
• 内联样式，如：style=””，权重值为1000
• !important，加在样式属性值后，权重值为 10000

如果多个样式的权重相同，则后面的样式会覆盖前面的样式。因此，通常使用权重高的样式定义特殊样式，而使用权重低的样式定义基本样式。

注： 我们在设计组件的时候，如果样式直接使用scope的话，便会增加样式的权重，导致在外部组件引用时，修改样式的权重增加。所以我们在设计组件的样式的时候，在对私有化的样式使用scope标签，公共的样式使用普通的style标签。便于在后续使用组件的时候，方便修改样式。（vue文件中如果不在style标签中增加scope的话，会影响项目整体样式。）