vue3.x style特性

1、选择器相关
	(1)深度选择器
		选择子组件中的元素
		
		.a :deep(.d) {
		  color: yellowgreen;
		}
		或使用原生css支持的
		.a >>> .d {
		  color: red;
		}
		less 或 scss中
		.a /deep/ .d
	
	(2)插槽选择器
		默认情况下,作用域样式不会影响到<slot/>渲染出来的内容,因为它们被认为是父组件所持有并传递进来的,如果需要需使用:slotted
		:slotted(div) {
		  color: red;
		}
	
	(3)全局选择器
		让其中一个样式规则应用到全局
		:global(.red) {
		  color: red;
		}

2、混合使用局部与全局样式
	<style>
	/* global styles */
	</style>
	
	<style scoped>
	/* local styles */
	</style>

3、css变量
	方式一:直接使用变量
		<script>
		export default {
		  data() {
		    return {
		      color: 'red'
		    }
		  }
		}
		</script>
		
		<style>
		.text {
		  color: v-bind(color);
		}
		</style>
	
	方式二:支持JavaScript表达式(需要用引号包裹起来)
	
		<script setup>
		const theme = {
		  color: 'red'
		}
		</script>
		
		<style scoped>
		p {
		  color: v-bind('theme.color');
		}
		</style>



4、style module

	(1)设置style为CssModule,会被编译为CSS Modules 
		<style module>
		<style module='自定义名称'>
		.success {
		  color: #090;
		}
		
		</style>
		
	(2)在template中使用
		对生成的类做hash计算以避免冲突,实现了和scope CSS一样将CSS仅作用于当前组件的效果
		<template>
		  <p :class="$style.success" :class="自定义名称.success"> 
		    This should be red
		  </p>
		</template>
	
	(3)只能在render或setup函数中使用,允许在函数中访问CSS模块。
		<script>
		import { h, useCssModule } from 'vue'
		export default {
		  setup() {
		    const style = useCssModule()
		    const style2 = useCssModule('classes')	对于自定义了module名称的<style module>模块
		    
		    return () =>
		      h(
		        'div',
		        {
		          class: style.success
		        },
		        'Task complete!'
		      )
		  }
		}
		</script>