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>