待解决问题1:scoped

SlothSid

于 2022-05-13 02:00:16 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/SlothSid/article/details/124743963

9 篇文章

订阅专栏

本文探讨了在Vue应用中，如何理解scoped样式的作用范围，以及为何将title类名写在非scoped的div上反而能影响到子组件中的h2元素。通过实例解析，解释了CSS选择器优先级和组件内样式穿透现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue中设置

<style scoped>
  .title{
    color: red;
  }
</style>

在App的子组件中

<template>
  <div class="demo">
      <h2 class="title">学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
  </div>
</template>

引用title类名，不起作用。因为一旦定义scoped属性，只能在它的模板使用
但是有疑惑？

<template>
  <div class="demo title">
      <h2 >学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
  </div>
</template>

我把title写在div中，字体颜色变为红色了，为什么？