background 覆盖 内容_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"/>
template>

<script>import Home from './components/Home.vue'export default {name: 'App',components: {
    Home
  }
}script>


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


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