vue样式穿透------深度选择器

本文介绍了Vue中使用scoped属性实现组件样式私有化的基本原理,并通过示例说明了在组件嵌套情况下,如何通过样式穿透解决子组件样式覆盖问题。文章详细讲解了CSS、Less和Scss中不同的样式穿透方法,如>>>、/deep/和::v-deep,以确保父组件能够影响到子组件的内部样式。
摘要由CSDN通过智能技术生成

原作者链接https://www.jianshu.com/p/30c797bb0069
前言
vue的style中设置scoped属性后,组件实现样式私有化。
但是该组件又使用的其他组件库时(vant,elementui,自定义等),该组件的style中的样式,优先级低,不生效,这个时候需要使用样式穿透(作用得更深)。

一、scoped底层原理
scoped是通过在DOM以及css中加上data-v-xxx唯一标识来实现样式私有化。
1.加上scoped前

<template>
    <div class="demo">
        样式穿透示例
    </div>
</template>
<style >
    .demo{
        color: rgba(255,0,0,0.5);
    }
</style>

在这里插入图片描述

2.加上scoped后

<style scoped>
    .demo{
        color: rgba(255,0,0,0.5);
    }
</style>

在这里插入图片描述

通过图片可以看到scoped底层是通过在DOM节点中添加data-v-xxx,CSS中通过添加[data-v-xxx]属性过滤,提高优先级,来实现样式的私有化。

二、为什么需要样式穿透
看一个场景实例:子组件根元素颜色为红色,非根元素为蓝色。
父子两个组件style都使用scoped属性,在不修改子组件的前提下,在父组件上修改子组件的颜色为绿色。

// 子组件
<template>
    <div class="c1">
        子组件根元素(red)
        <div class="c2">
            子组件非根元素(blue)
        </div>
    </div>
</template>
<style scoped>
    .c1{
        border: 1px dashed #000;
        margin-top: 10px;
        padding: 5px;
        color: red;
    }
    .c1 .c2{
        border: 1px dotted #000;
        color:blue;
    }
</style>

// 父组件
<template>
    <div class="demo">
        父组件
        <css-demo class="son"></css-demo>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import cssDemo from "./css-demo2.vue"
export default Vue.extend({
    components:{ cssDemo }
})
</script>
<style scoped>
    .demo{
        width: 200px;
        padding: 10px;
        border: 1px solid rgba(0,0,0,1);

        color: #000;
    }
    .son{
        color: green;
    }
    .son .c2{
        color: green !important;
    }
    .c1 .c2{
        color: green !important;
    }
    .son.c1 .c2{
        color: green !important;
    }
</style>

在这里插入图片描述

在这里插入图片描述

可以看到只有子组件的根元素作用有生效,但是子组件的非根元素样式并没有生效,即使使用了!important。
scoped在渲染的时候,如果组件内部还有子组件,只会在子组件的根元素加上data-v-xxx属性。
当加上样式穿透后

// 父组件
<style scoped>
    >>> .c1 .c2{
        color: green !important;
    }
</style>

在这里插入图片描述

在这里插入图片描述

三、样式穿透的方法
vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。

css 使用 >>>
less 使用 /deep/
scss 使用 ::v-deep
  1. css
<style scoped>
    >>> .c1 .c2{
        color: green !important;
    }
</style>
  1. less
<style scoped lang="less">
    /deep/ .c1 .c2{
        color: green !important;
    }
</style>
  1. scss
<style scoped lang="scss">
    ::v-deep .c1 .c2{
        color: green !important;
    }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值