[分享]css的样式污染和作用域scoped问题

scoped作用域

我们通常会在style中设置scoped来保证页面间的样式是隔离的，scoped可以让样式只作用与当前页面。

<template>
  <div class="mycss">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  // ...
}
</script>

<style scoped>
.mycss {
  /* 这里的样式只会作用域当前页面 */
}
</style>

使用scoped属性后，vue会自动将这些样式转换为带有唯一属性选择器的形式，例如：

/* 编译后的样式 */
.component[data-v-f3f3eg9] {
  /* 这里的样式只会作用域当前页面 */
}

这样可以确保样式只作用于当前组件及其子组件，避免全局样式污染和样式冲突。

非隔离样式
如果需要在全局使用样式，可以将样式定义在没有scoped属性的 <style> 标签中。这些样式将会影响到整个项目的所有页面
有时候你需要修改一些弹窗的样式，但是发现在scoped内写不生效，因为有的组件挂载的位置并不是当前页面节点下，而是body的根节点，这个时候就可以定义一个没有scoped的style来修改弹窗样式。

需要注意，这种修改是作用于全局，其他页面也会受到影响

<style>
/* 没有加scoped 样式作用于全局 */
</style>

父组件与子组件的样式修改机制

如果你想在父组件内直接修改子组件的样式，例如子组件内部有一个类名 ： category-item，在父组件中的style内修改category-item的样式，这种方式是不生效的

// 子组件
<view class="supplier-category-item" v-for="item in 24" :key="item">
            营销
</view>

// 父组件
<style>
    .supplier-category-item{
        color: blue;
    }
</style>

样式未生效：

所有的样式都添加了样式随机数

如果你想要在父组件更改子组件样式，必须使用样式穿透，例如：/deep/、::deep(类名)

// 父组件
<style>
    /deep/.supplier-category-item{
        color: blue;
    }
</style>

生效：