/deep/ 深度作用选择器作用及使用

Posted 2023-03-23

参考技术A 之前在开发中遇到一个问题，vue项目结合 element ui 使用。

但是 element ui 的样式不一定符合我们的需求，这时我们就需要改变它的样式。

比如博主使用到了element ui 的对话框，我想要改变这个对话框标题的颜色，所以我需要在页面中审查元素找到对应的标签。

但是当我找到并且复制，然后试图去改变它的样式时，怎么都没办法改变。

我以为是权重的问题，所以我加 ! important，但是也毫无作用。

当我审查元素发现此样式就没有作用到，就相当于它没有找到这个元素，所以也就不存在改不改变样式的问题了。

这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如 deep

vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

这是我起初试图改变的方法（亲测无效）：

这是使用deep后的方法（亲测有效）：

原理就是通过找到父元素深度的找到我们需要改变的子元素，然后改变它的样式即可。

若/deep/后有多层嵌套：

再换种写法 移动/deep/位置：

再换一种 又加个子元素：

综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.

若写多个/deep/：

多个/deep/的情况下，只有最外层的/deep/有效，内层的其他/deep/都是无效的，写了也没意义，不建议写。

.

CSS - scoped属性/深度作用选择器/deep/及＞＞＞

目录

• 1.scoped属性
• 2.设置scoped后设置子组件样式的方法
• • 2.1 混用本地和全局样式
  • 2.2 使用深度作用选择器
• 3.注意事项

1.scoped属性

• 当 <style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，而不会穿透到子元素中。
• 也就是说组件A使用了scoped属性，那么在A组件中设置的样式并不会影响到A组件的子组件B的样式。
• 但是需要注意点的是，子组件B的根节点会受到父组件A的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

来一个栗子：
父组件A：

<template>
  <div id="text-page">
    <B></B>
  </div>
</template>

<script>
import B from "./B.vue";
export default {
  name: "A",
  components: {
    B,
  },
};
</script>

<style lang='less' scoped>
// 设置子组件的根元素背景为粉色
#b_page {
  background: pink;
  // 设置子组件中除根元素外的元素(p)元素字体颜色为白色
  p {
    color: white;
  }
}
</style>

子组件B：

<template>
  <div id="b_page">
    <p>我是子组件</p>
  </div>
</template>

<script>
export default {
  name: "B",
};
</script>

<style lang='less'>
</style>

效果展示：

由该例子可知：当使用了scoped属性的父组件A，只能为子组件B设置根元素的样式（为子元素B的根元素设置的粉色背景生效），而不能设置子元素B中其他元素的样式（为子元素B其他元素设置的字体颜色未生效）。

2.设置scoped后设置子组件样式的方法

当为组件设置了scoped属性后，想为子元素设置样式时，可以怎么办？

2.1 混用本地和全局样式

你可以在一个组件中同时使用有 scoped 和非 scoped 样式：

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

2.2 使用深度作用选择器

<style scoped>
.a >>> .b { /* ... */ }
</style>

如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/或::v-deep操作符取而代之——两者都是>>> 的别名，同样可以正常工作。
例如为上一个例子加入/deep/查看效果:

<style lang='less' scoped>
// 设置子元素的根元素背景为粉色
#b_page {
  background: pink;
  // 设置子组件中除根元素外的元素(p)元素字体颜色为白色
  /deep/ p {
    color: white;
  }
}
</style>

因为使用了深度作用选择器/deep/，所以为子元素B的字体颜色可以设置成功，效果如下所示：

深度作用选择器也通常用于一些第三方UI插件的样式修改。

如果使用深度作用选择器不能成功修改子组件样式或者是第三方插件组件样式，记得为其加上!important试试。

3.注意事项

• 通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。
• Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。
• 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。