使用deep选择器的原因

仙女叔叔

已于 2022-04-20 14:20:46 修改

阅读量610

点赞数 2

文章标签： html 前端 css vue

于 2022-04-20 14:18:19 首次发布

本文链接：https://blog.csdn.net/qq_52070860/article/details/124295866

版权

本文讲述了在Vue项目中，由于 scoped 属性导致的CSS选择器问题，特别是在与Element UI配合时，如何使用deep选择器来精确修改组件样式。重点介绍了为何深选择器在elementui组件如el-tabs中的应用和解决方法。

摘要由CSDN通过智能技术生成

在做vue项目时，我们有时候会用到deep深度选择器，又可以写成>>>。使用的原因是因为scoped；

原因：①因为vue是组件试的开发，所以我们在每个组件下写css样式的时候都会在style标签上加上scoped，scoped作用是使组件的css不会对子组件起作用。相信大家在控制台上都会看到标签会多出data-v-xxxxx属性，这是scoped自动添加的，标签只有有对应的data-v-xxxxx属性，组件的css才会起作用。

②然而scoped会给当前组件的所有标签加data-v-xxxxx属性，那所有的标签不都是可以识别到了？为什么还会用到deep？当然还有一个原因，那就是因为element ui组件的使用。element ui有的组件默认是一个单独的组件，举个例子：el-tabs；

  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>

我们打开控制台的Devtools看一下组件的关系

可以看到，无论是el-tabs还是el-tab-pane都充当了一层父组件，相当于el-tabs和el-tab-pane是单独的一个组件，this.refs["el-tab-pane"].$parent.$parent = “我们正在写的组件”。

我们再看一下data-v-xxxxx属性的情况：

可以看到只有el-tabs才有 data-v-xxxxx属性，而el-tabs的子组件没有data-v-xxxxx属性。

所以，我们在vue+element ui框架下做项目的时候，想要改变element ui组件的样式时，会用到deep深度选择器。

也可以在根组件全局css里不用scoped，改变element ui组件的样式

<style>
/* 全局样式 */
@import url(./assets/css/main.css);
@import url(./assets/css/default/layer.css);
@import url(./assets/css/default/iconfont.css);
</style>