学习 vue 遇到样式不生效的问题，求教各位
本帖最后由 thepoy 于 2021-8-4 11:42 编辑一个组件：
```
<template>
<div class="top">
这是头部
<slot></slot>
</div>
</template>
<style scoped>
div {
width: 428px;
height: 84px;
background: rgb(0, 138, 208) none repeat scroll 0% 0%;
transition: unset;
}
</style>
```
此时`div`的样式是生效的：
但如果将`style`中的标签替换为类，则样式就不生效了：
```
.top {
width: 428px;
height: 84px;
background: rgb(0, 138, 208) none repeat scroll 0% 0%;
transition: unset;
}
```
请问为什么会这样？
我应该如何使用`class`或`id`来设置样式？
--------------------------------
已解决：
将 webpack 中的 css 换了 scss 后，然后在 style 后加上了 lang="scss" 就解决了。
但仍不知道之前失效的原因是什么。 把top换掉，用 top1 本帖最后由 523无妄 于 2021-8-4 10:29 编辑
你可以f12看看样式到底为啥没生效，一般开发中，不会起这种 top这么low的名 lazyMansion 发表于 2021-8-4 10:26
把top换掉，用 top1
换过了，效果一样，这个class名字换了好几个了都没用 523无妄 发表于 2021-8-4 10:27
你可以f12看看样式到底为啥没生效，一般开发中，不会起这种 top这么low的名
不生效的原因是，在渲染出来的页面中就没有用 class 写的样式 thepoy 发表于 2021-8-4 10:29
换过了，效果一样，这个class名字换了好几个了都没用
那，去掉scoped 试试，还不行的话， 加个 lang="css"试试 lazyMansion 发表于 2021-8-4 10:34
那，去掉scoped 试试，还不行的话， 加个 lang="css"试试
刚刚试过了，也不行
<style lang="css">
.top {
width: 428px;
height: 84px;
background: rgb(0, 138, 208) none repeat scroll 0% 0%;
transition: unset;
}
</style> 你用的是vue-cli开发的？创建项目的时候有没有选择css的预处理，sass，less什么的 ？如果选择预处理了就把style标签里的lang改成对应的
页:
[1]