存在css没有应用到app.vue的问题

Question

我是刚入门的初学者vue.js。创建项目后，我想应用一个简单的 css 到 web。（边距，框大小）但是，由于某些原因，app.vue中写的css根本不适用。

//app.vue

<template>
  <div>
    <Nav />

    <div class="banner">
      <carousel
        :autoplay="true"
        :nav="true"
        :dots="true"
        :items="1"
        :pullDrag="true"
      >
        <!-- <img src="https://placeimg.com/200/200/any?1" /> -->
        <img src="./assets/1.png" />
        <img src="./assets/2.png" />
        <img src="./assets/3.png" />
      </carousel>
    </div>

    <div id="category-title">
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
      <h2 class="category-title">Title</h2>
    </div>
  </div>
</template>

<script>
import Nav from "./components/Nav";
// import Banner from "./components/Banner.vue";
import carousel from "vue-owl-carousel";

export default {
  name: "App",
  components: {
    Nav,
    carousel,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-left: 30%;
  margin-right: 30%;
}

.banner {
  height: 100px;
}

#category-title {
  margin-top: 100px;
}
</style>

我想在中应用边距和横幅的大小，但 css 不适用。我认为其他项目没有问题，但我可以知道疑似原因吗？

谢谢。

Answer 1

我认为与#category-title 相关的样式会起作用，但不会应用#app 样式，因为此组件范围内不存在为此目的应用标签，因此您需要在 [=15 上应用样式=] 文件存在于 public 文件夹中如下所示

或在 index.html

中包含全局 css 文件和 link

存在css没有应用到app.vue的问题

There is a problem that css is not applied to app.vue

html

css

web

vue.js