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

Posted 2021-06-17 WHOVENLY

目录

• 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 都将被这个规则匹配。