Vue3中css新特性

tingkeiii

已于 2022-11-16 22:03:28 修改

阅读量332

点赞数

分类专栏： Vue3 文章标签： css 前端 css3

于 2022-11-16 22:01:32 首次发布

(´▽`)ﾉ

本文链接：https://blog.csdn.net/w1311004532/article/details/127894451

版权

Vue3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

都比较简单，直接上代码

都是 :deep(选择器){ 样式 } 这样的格式

<style scoped>
/*1.插槽选择器：为slot标签内的元素指定样式（不使用则不生效）*/
:slotted(h1){
  color: pink;
  }

/*2.deep样式穿透新写法： :deep(选择器){ 样式 } */
:deep(.el-table){
  color: pink;
  }

/*3.全局选择器：全局都生效。以前做法都是另外写一个style标签不加scope*/
:global(h1){
  color:red
  }

/*4.动态css：利用v-bind,css属性值是变量*/
.box{
  background-color: pink;
  height: 100px;
  width:v-bind(wi+'px') /*wi是一个定义好的变量，可以拼接的*/
  }
</style>