scoped 和 /deep/ 解决 css 冲突覆盖问题

上一节内容我们学习了 Vue 中使用 CSS 系统学习 vue 中使用 css 的各种方式，这节内容学习一下 scoped 和 /deep/ 的作用：

在 vue 中使用组件时，最怕 css 之间纠缠不清，相互冲突。在单文件组件中，vue-loader 中提供了关键字 scoped 专门用来防止组件之间 css 产生干扰。其本质是利用了 css 的权重。在 聚齐了这3张宝图，搞懂CSS权重 这节内容中详细学习了 css 的权重。举例：

组件层级：

├── App
    ├── Home
        └── Des

组件 App：

<template>
  <!-- 可以给 Home 组件中添加 class （root 和 root-app），与组件的根 class 不冲突-->
  <Home class="root"/>
</template>

<script>
import Home from './components/Home.vue'

export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<!-- 在样式中使用了 scoped，该组件中定义的 class 不会影响父组件定义的 class -->
<style scoped>
.root {
  margin: 20px;
}
/* 由于在子组件 Home 中也定义了 home-wrap 这个 class，将会被父组件定义的同名 class 覆盖，不过只能覆子组件的根组件样式 */
.home-wrap {
  background-color: #22aa22;
}
/* 虽然子组件 Home 也定义了该 class，但由于不是根节点的 class，将不会被覆盖*/
.des {
  background-color: #ccc;
}
</style>

定义组件 Home：

<template>
  <div class="home-wrap">
    <h1 class="title">前端小课</h1>
    <div class="des">
      <p class="text">帮助10W人入门并进阶前端</p>
      <Des></Des>
    </div>
  </div>
</template>

<script>
import Des from './Des.vue';

export default {
  name: 'Home',
  components: {
    Des
  }
}
</script>

<style scoped>
.home-wrap {
  background-color: #eee;
  min-height: 200px;
  padding: 10px;
}
/* 父组件只能覆盖根节点的 class，如果想覆盖非根节点的 class 需要添加 /deep/ */
/deep/ .content {
  font-size: 20px;
}
</style>

<!-- 未使用 scoped 定义的 css 可以单独 -->
<style>
.title {
  font-size: 20px;
}
</style>

定义组件 Des：

<template>
    <div class="des-wrap">
        <p class="content">掌握 Vue 的核心编程思想。</p>
    </div>
</template>
  
<script>
  export default {
  name: 'Des'
}
</script>

<style scoped>
.des-wrap {
  background-color: #333;
  padding: 10px;
  border-radius: 6px;
}
.content {
  font-size: 20px;
  color: #fff;
}
</style>

这背后的原理，其实利用了属性选择器，我们看上面代码下被转换后的 HTML：

<div class="home-wrap root" data-v-5b987f2c="" data-v-7ac74a55="">
    <h1 class="title" data-v-5b987f2c="">前端小课</h1>
    <div class="des" data-v-5b987f2c="">
        <p class="text" data-v-5b987f2c="">帮助10W人入门并进阶前端</p>
        <div class="des-wrap" data-v-711c43d5="" data-v-5b987f2c="">
            <p class="content" data-v-711c43d5="">掌握 Vue 的核心编程思想。</p>
        </div>
    </div>
</div>

/* 自动添加属性 */
.home-wrap[data-v-7ac74a55] {
    background-color: rgb(34, 170, 34);
}
.root[data-v-7ac74a55] {
    margin: 20px;
}
/* 未使用 scroped */
.title {
    font-size: 20px;
}
.des-wrap[data-v-711c43d5] {
    background-color: rgb(51, 51, 51);
    padding: 10px;
    border-radius: 6px;
}
[data-v-5b987f2c] .content {
    font-size: 30px;
}
.content[data-v-711c43d5] {
    font-size: 20px;
    color: rgb(255, 255, 255);
}

从转换结果中可以看到，vue-loader 会给 CSS 选择器添加了属性，使其变为了属性选择器，只有包含某个属性的元素才会被选中。这种方案其实给我们提供了一种解决 css 冲突的方案。

scoped 减少了我对 CSS 样式冲突的焦虑

大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/