[vue3]css的各种写法

css作用域

知识点说明
1、标记 scoped 的样式，只会影响当前组件的元素，父组件的样式，不会渗透到子组件
2、想设置当前页面的 顶级样式，父组件就不要使用 scoped
3、v-html创建的DOM，不会被作用域样式影响

举个栗子

const richDom = ref(`
	<div style="color: red;">
		CSS Modules
	</div>
`)

<div class="box">
	// box上的样式，没有被富文本继承
	<div v-html="richDom"></div>
</div>

<style lang="scss" module scoped>
.box {
	font-size: 40px;
}
</style>

深度选择器

<style lang="scss" scoped>
:deep(.box) {
    color: red;
}
</style>

插槽选择器

知识点说明
默认情况下，作用域样式不会影响 渲染出来的内容，:slotted 伪类可以将插槽内容作为选择器的目标

举个栗子

<div class="box">
	<slot></slot>
</div>

<style lang="scss" scoped>
.box {
    :slotted(div) {
        font-size: 40px;
    }
}
</style>

全局选择器

→ 第一种
<style lang="scss"></style>

→ 第二种
<style lang="scss" scoped>
:global(.box) {
    color: red;
}
</style>

混合使用局部与全局样式

// 全局样式
<style lang="scss"></style>

// 局部样式
<style lang="scss" scoped></style>

modules

→ 基本使用
<div :class="$style.box">CSS Modules</div>
<div :class="[$style.box1, $style.box2 ]">CSS Modules</div>

<style lang="scss" module scoped>
.box {
	color: red;
}

.box1 {
	color: green;
}
.box2 {
	font-size: 40px;
}
</style>

→ 自定义注入名称
<div :class="$self.box">CSS Modules</div>

<style lang="scss" module="$self" scoped>
.box {
	color: red;
}
</style>

v-bind

const redColor = ref('red')

function handleColor () {
	const letters = '0123456789ABCDEF'
    let color = '#'
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)]
    }
	redColor.value = color
}

<div class="box" @click="handleColor">v-bind注入颜色</div>

.box {
	color: v-bind(redColor);
}

绝对自律，是通往自由的唯一道路 —— 冬泳怪鸽