style标签下的scoped

<style lang="less" scoped><style>

scoped属性表示使该样式模块化，加上scoped后，vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，在浏览器中的渲染结果：

.resource .resource_content[data-v-721a7a87] {
    width: 100%;
    background: #fff;
    box-shadow: 0 6px 13px 0 rgb(85 130 194 / 7%);
    border-radius: 2px;
    margin-bottom: 42px;
}

其中[data-v-721a7a87]就是被加入的唯一不重复的标记

当在进行组件间的相互调用时 分为两种情况：

     1.一般组件引用私有组件

     2.私有组件引用私有组件

当一般组件引用私有组件修改样式对一个元素的样式产生冲突时，依然是私有组件的样式在生效，如果需要一般组件内的样式生效，需要提高要修改的样式的权重。

当私有组件引用私有组件修改样式各自生效，组件一内写的任何样式都不会作用到组件二上，可以再写一个style标签，一个用于公共样式，一个用于私有样式。例如：

<style>
.el-button--primary {
  color: #FFF;
  background-color: #6D6BB0;
  border-color: #6D6BB0;
}
</style>
<style lang="less" scoped>
.w {
  padding-bottom: 100px;
}
</style>

（.el-button--primary 内的样式如果写在加了scoped的style标签内，就是不生效的）

css中的权重：

css选择规则的权值不同时，权值高的最先生效；css选择规则的权值相同时，后定义的规则最先生效；

从上到下的顺序表明权重由高到低 !important>行间样式（内联样式）>id>class|属性|伪类>标签选择器|伪元素>通配符

    // !important 

    // style=""

    // .class | :hover,:link,:target | [type]

    // p | ::after, ::before, ::fist-inline, ::selection

    // *