文章目录
什么是CSS样式穿透
所谓的穿透,官方叫做深度选择器。
如果引入了其它组件,然后通过dom节点上的选择器来改变这个组件的一些样式,但是修改了不会生效
原因是<style scoped>中的scoped所致,当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。
<template>
<div id="app">
<box1></box1>
<box2></box2>
</div>
</template>
<script>
export default {
components:{
box1:()=>import("@/views/login/views/box1.vue"),
box2: () => import("@/views/login/views/box2.vue"),
}
};
</script>
<style scoped>
#app .box1{
color: black;
}
#app .box2{
color: green;
}
</style>
发现颜色并没有修改
此时需要样式穿透,需要用到深度选择器。
<style scoped>
#app >>> .box1{
color: black;
}
#app >>> .box2{
color: green;
}
</style>
这时就修改成功了
再不同的预处理器中样式穿透也不一样
css可以使用>>>,/deep/,::v-deep
less和node-sass可以使用/deep/,::v-deep
dart-sass可以使用::v-deep
所有的都能使用:deep()