在 Vue 中，CSS 可以作用于當(dāng)前模板，通過以下方式實(shí)現(xiàn)：

1、內(nèi)聯(lián)樣式：在模板中直接使用 style 標(biāo)簽定義 CSS 樣式。

<template>
  <div style="color: red;">這是一段紅色文字</div>
</template>

2、外部樣式表：在 Vue 項(xiàng)目中，可以通過導(dǎo)入外部 CSS 文件來定義和應(yīng)用樣式，在App.vue 中導(dǎo)入main.css 文件：

<template>
  <div class="app">這是一段應(yīng)用樣式文字</div>
</template>

在main.css 中定義.app 樣式：

.app {
  color: blue;
}

3、組件樣式：在 Vue 組件中定義的樣式僅適用于該組件及其子組件，在MyComponent.vue 中定義樣式：

<template>
  <div class="my-component">這是一段組件樣式文字</div>
</template>

在MyComponent.vue 的<style> 標(biāo)簽中定義.my-component 樣式：

.my-component {
  color: green;
}

4、作用域樣式：使用 Vue 的作用域樣式功能，可以在組件內(nèi)部定義樣式，僅適用于該組件的 HTML 結(jié)構(gòu)。

<template>
  <div class="my-component">這是一段作用域樣式文字</div>
</template>

在MyComponent.vue 的<style> 標(biāo)簽中使用scoped 屬性定義樣式：

<style scoped>
.my-component {
  color: orange;
}
</style>

通過以上方式，CSS 可以有效地作用于 Vue 模板中的元素，實(shí)現(xiàn)樣式的靈活應(yīng)用和管理。