有一個問題 css 沒有應用到app.vue

Question

我是剛入vue.js的初學者。 創建項目后，我想對 web 應用一個簡單的 css。 (margin, box size) 但是，由於某種原因，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 樣式，因為此組件 scope 中不存在 app 標簽，為此您需要在 index.html 文件中應用樣式如下所示的公用文件夾

或者在 index.html 中包含一個全局 css 文件和鏈接