前言:
Vue中使用
,其原理就是在class名称后加上一个data属性选择器。css_scoped
<style scoped>
.main { float: left; }
</style>
//转义后变成
<style>
.main[data-v-49729759] { float: left }
</style>
css_scoped
是Vue的专用方案,如果你使用React等其它UI框架,那么你可以使用更通用的
,其原理是为样式名加css_module
hash
字符串后缀,从而保证class名全局唯一.
<style module>
.main { float: left; }
</style>
//转义后变成
<style>
.main_3FI3s6uz { float: left; }
</style>
组件作用域CSS
深度选择器
处于 scoped
样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep()
这个伪类
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
插槽选择器
默认情况下slot插槽的内容属于父组件,作用域样式不会影响<slot/>渲染出来的内容,使用:slotted可以将选择插槽内容
<style scoped>
:slotted(div){
color:blue;
}
:global(.red){
color:black;
}
</style>
全局选择器
如果希望一个样式应用到全局,可以使用:global伪类来实现。
CSS modules
<style module>标签会被编译为css modules并将生成的css class作为$style暴露给组件使用。
<template>
<p :class="$style.red">This should be red</p> 默认名称
<p :class="classes.red">This should be red</p> 自定义名称
</template>
<script setup>
import { useCssModule } from 'vue'
// 在 setup() 作用域中...
// 默认情况下, 返回 <style module> 的 class
useCssModule()
// 具名情况下, 返回 <style module="classes"> 的 class
useCssModule('classes')
</script>
<style module="classes">
.red {
color: red;
}
</style>
CSS 中的 v-bind()
<style>
.text {
color: v-bind(color);
}
</style>
这个语法同样也适用于 <script setup>,且支持 JavaScript 表达式 (需要用引号包裹起来):
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>