<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
// *