vue中css作用域及深度作用选择器的用法

Vue中有作用域的CSS

当< style>标签有scoped属性时，它的css只作用于当前组建中的元素。vue2和vue3均有此用法；

当使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受父组件有作用域的css和子组件有作用域的css影响。

<style scoped>
.example {color: red;
}
</style>
<template><div class="example">hi</div>
</template>

vue2和vue3均支持混合使用局部与全局样式

<style>
/*全局样式*/
.container-main{background:'#fff';
}
</style>
<style scoped>
/* 当前组件/页面样式 */
.example {color: red;
}
</style>

vue2深度作用选择器

css作用域官网参考
如果希望scoped样式能够作用得更深，能直接影响子组件，可以使用>>>操作符

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

像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

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

注意：通过v-html创建DOM内容不受作用域内样式的影响；但是仍然可以通过深度作用选择器来为他们设置样式；

vue3深度作用选择器

CSS功能官网参考
在vue3中，如果希望scoped样式中的一个选择器能够作用的更深，例如影响子组件，可以使用:deep()这个伪类；

<template>
<div class="index-main">
<el-row><el-button type="success">按钮</el-button><el-button type="primary">按钮</el-button>
</el-row>
<el-row class="btn-bar" style="padding-top: 20px;"><el-button type="success" size="small">按钮</el-button><el-button type="primary" size="small">按钮</el-button>
</el-row>
</div>
</template>
<style scoped>
/*.btn-bar 中的button都被加上了边框*/
.btn-bar :deep(.el-button){border: 2px solid #f00;
}
/*
.btn-bar:deep(.el-button){border: 2px solid #f00;
}
.btn-bar:deep() .el-button{color: #f00;
}
*/
</style>

以上三种写法均可解析为下面的结果

/*解析结果*/
.btn-bar[data-v-b4e148ca] .el-button {border: 2px solid #f00;
}

使用scss预处理器语言时，在类btn-bar中的所有标签均做深度样式调整时的写法：

<template>
<div class="index-main">
<el-row style="padding-top: 20px;" class="btn-bar"><el-button type="success" size="small">按钮</el-button><el-button type="primary" size="small">按钮</el-button><el-link type="primary">主要链接</el-link>
</el-row>
</div>
</template>
<style lang="scss" scoped>
.btn-bar:deep(){.el-button{border: 2px solid #f00;}.el-link{margin-left: 20px;}
}
</style>

解析结果如下：

.btn-bar[data-v-b4e148ca] .el-button {border: 2px solid #f00;
}
.btn-bar[data-v-b4e148ca] .el-link {margin-left: 20px;
}

vue3插槽选择器

默认情况下，作用域样式不会影响到 < slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标：

<style scoped>
:slotted(div) {color: red;
}
</style>

vue3全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 < style>，可以使用 :global 伪类来实现 (看下面的代码)：

<style scoped>
:global(.red) {color: red;
}
</style>

CSS Modules

CSS Modules是一个用于模块化和组合 CSS 的流行系统。vue-loader 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。

css Modules的使用方法

//使用方式，在style上添加module属性
<style module>.red {color: red;}.bold {font-weight: bold;}
</style>

这将为 css-loader 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 $style 的计算属性，你可以在你的模块中使用动态 class 绑定：

<template><p :class="$style.red">This should be red</p>
</template>

由于它是一个计算属性，它也适用于 :class 的 object/array 语法：

<template><div><p :class="{ [$style.red]: isRed }">Am I red?</p><p :class="[$style.red, $style.bold]">Red and bold</p></div>
</template>

JavaScript 中的访问（选项式API）

<script>
export default {created () {console.log(this.$style.red)}
}
</script>

自定义注入名称

<template>
<div style="background: #000; padding: 15px;"><p :class="$style.yellow">黄色</p><p :class="classA.red">红色</p><p :class="classB.blue">蓝色</p>
</div>
</template><script>export default {data(){return{count: 1}},mounted(){console.log('mounted',this.$style);console.log('mounted',this.classA);}}
</script><style module="classA">.red{color: #f00;font-weight: 700;}
</style>
<style module="classB">.blue{color: blue;font-weight: 700;}
</style>

组合式API中的使用

<script setup>
import { useCssModule } from 'vue';console.log('moudle',useCssModule());
console.log('moudle classA',useCssModule('classA'));
</script>