一文彻底搞懂vue中scoped与deep深度选择器

前端驿站Lite

已于 2023-09-14 08:48:05 修改

阅读量1k

点赞数

文章标签： vue.js javascript css3 前端 html

于 2023-02-19 09:08:19 首次发布

本文链接：https://blog.csdn.net/SmileLife123/article/details/129107455

版权

关注公众号【前端驿站Lite】，一个不止分享前端技术的地方！

前置知识

CSS属性选择器

HTML允许给DOM元素设置属性（<p bg-red>属性</p>）或属性值(<p data=“red”>属性值</p>),通过属性进一步选择元素，修改其样式。


<!DOCTYPE html>
<html>
<head>
  <style>
    p[bg-red] {
      background-color: red;
    }

    p[fontColor="red"] {
      color: red;
    }
  </style>
</head>
<body>
  <p bg-red>文本一</p>
  <p fontColor="red">文本二</p>
</body>

</html>

效果如图：

scoped原理

vue中scoped主要通过postcss实现的，转译代码时postcss做了如下处理：

给每个DOM节点添加一个唯一的属性（如：data-v-a0901）

在css选择器末尾加上对应的属性选择器（如：.user[data-v-a0901]）,来私有化样式

如果组件内包含其他组件，只会给其他组件的最外层标签加上当前组件的data属性

转译前


<style scoped lang="sass">
  .example {
    color: red;
  }
</style>
<template>
  <div class="example">scoped测试案例</div>
</template>

转译后


<style scoped lang="sass">
  .example[data-v-5558831a] {
    color: red;
  }
</style>
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

这样也就达到了样式模块化的目的。

scoped产生的影响

当我们想去改组件库样式（如elementUI）时,会发现修改不成功了。


<style lang="scss" scoped>
.container{
  background: #fff;
  .ep-rate{
    background: black;
    .ep-rate__item{
      background: red;
    }
  }
}
</style>

转译后


.container[data-v-7ba5bd90] { background: #fff; } 
.container .ep-rate[data-v-7ba5bd90] { background: black; } 
.container .ep-rate .ep-rate__item[data-v-7ba5bd90] { background: red; }

这时候会发现，想要改组件库的样式改不掉了，只改掉了第一层，因为引入其他组件，只会在最外层加上私有属性，所以ep-rate的样式可以修改成功。

那在scoped中如何修改组件库样式呢？这就要用到深度选择器了，继续往下看。

vue中深度选择器

deep的原理就是将私有属性移到上一层


<style lang="scss" scoped>
// .container[data-v-7ba5bd90]
.container{
  background: #d7d7d7;
  // .container .box2[data-v-7ba5bd90]
  .box2{
    width:100px;
    height: 100px;
    // .container .box2 .ep-button[data-v-7ba5bd90]
    .ep-button{
      background: red;
    }
    // .container .box2[data-v-7ba5bd90] .ep-button
    :deep(.ep-button){
      background: #00a6ff;
      border: none;
    }
  }
  :deep{
    // .container[data-v-7ba5bd90] .ep-rate
    .ep-rate{
      background: #000000;
      // .container[data-v-7ba5bd90] .ep-rate .ep-rate__item
      .ep-rate__item{
        background: #4eff10;
      }
    }
  }
}
</style>

可以看到，加deep深度选择器后，deep内的class都没加私有属性，而是把私有属性提升到了deep的上一层，这样就可以修改组件库样式了。