深层选择器
如果您希望样式中的选择器scoped
"深入",即影响子组件,则可以使用:deep()
伪类:
github-dark
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
以上内容将被编译为:
github-dark
.a[data-v-f3f3eg9] .b {
/* ... */
}
提示
创建的 DOM 内容v-html
不受范围样式的影响,但您仍然可以使用深度选择器来设置它们的样式。
插槽选择器
默认情况下,范围样式不会影响 渲染的内容<slot/>
,因为它们被视为传入它们的父组件所拥有。要明确定位插槽内容,请使用:slotted
伪类:
css
<style scoped>
:slotted(div) {
color: red;
}
</style>
v-bind()
在 CSS 中
SFC<style>
标签支持使用 CSS 函数将 CSS 值链接到动态组件状态v-bind
:
css
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
该语法适用于<script setup>,并支持 JavaScript 表达式(必须用引号引起来):
css
<script setup>
import { ref } from 'vue'
const theme = ref({
color: 'red',
})
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
实际值将被编译为散列 CSS 自定义属性,因此 CSS 仍然是静态的。自定义属性将通过内联样式应用于组件的根元素,并在源值发生变化时进行响应式更新。