普通的html、CSS结构,样式权重为 !important > 行内 > 头部 > 引入。但是在vue里面,我们的文件结构发生改变,不再是html文件而是vue文件,<style></style>将解析为组件也不是头部样式,这时样式权重比较复杂,下面我们来详细说一下。

vue样式作用域分为两种:

  • 全局:顾名思义即影响所有文件的样式 ,定义在App.vue中
  • 私有:仅作用于当前文件dom元素的样式;私有又分为两种情况,父组件和子组件

一般情况下是 子组件 > 父组件 > 全局,但是有时候我们会有些特别的需求。

例如现在有一个公共按钮组件,我们在几个页面中调用它。

<template>
    <div>
      <button>tab1</button>
    </div>
</template>

<script>
    export default {
        name: "slotVue3"
    }
</script>

<style scoped>
  button{
    background: #abcdef;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    margin-top: 30px;
  }
</style>

在这里插入图片描述
但是在首页调用的时候,要求改变按钮颜色。我第一个想法就是在父组件里重写样式,覆盖颜色,但是由于权重关系,并没有起效。要想效果生效,需要给样式添加>>>深度作用选择器。

<style scoped>
  /* 无效
  button{
    background: yellowgreen !important;
  } */
  >>>button{
    background: yellowgreen !important;
  }
</style>

在这里插入图片描述

深度作用选择器是vue-loader的一个属性,作用于

  • 影响子组件
  • 动态生成的内容

通过 v-html 创建的 DOM 不受 scoped 样式影响,但是我们可以通过深度作用选择器来为他们设置样式。

<template>
<div v-html="dom"></div>
</template>

<script>
export default {
      data(){
        return{
          dom: "<h5 class='title5'>Test V-html</h5>",
        }
      }
    }
</script>

<style scoped>
/* 无效
title5{
    color: darksalmon;
}
*/

>>>.title5{
   color: darksalmon;
}
</style>

在这里插入图片描述
你需要重写哪个元素的样式,作用器就放在那个元素的前面!

还有一种情况就是作为插件引入的样式文件,如果我们想修改插件的默认样式,重写后在测试环境下没有问题,但是打包后发现不起效。是因为在main.js中引入的插件样式放在了app.vue中的前面。

有两个解决方案:

  • 配合>>>在样式后加!important;
  • 在main.js中将放到引入的插件后,这样子写app.vue中的样式权重就比插件的样式权重高了;
import 'swiper/css/swiper.min.css'
import 'bootstrap/dist/js/bootstrap.min'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'animate.css';
import "vue-image-lightbox/dist/vue-image-lightbox.min.js"
import "vue-image-lightbox/dist/vue-image-lightbox.min.css"
import VueLazyload from "vue-lazyload";  //懒加载

import App from './App'

需要注意的是:

  • 对标签名使用深度作用器时,会影响性能,慢很多倍。使用class或者id则无性能影响。如 >>>p { color: red }>>>.example { color: red } 性能要慢。

  • 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说,如果匹配 .a 的元素包含一个递归子组件,则所有的子组件中的 .b 都将被这个规则匹配。

  • 如果是使用SASS或者LESS预处理器编写CSS,一样可以使用深度作用处理器,不过需要改为/deep/::v-deep


参考:深度作用选择器

Logo

前往低代码交流专区

更多推荐