【Vue.js学习笔记】11：组件中CSS的作用域

样式表最终的生成位置

有两个组件，一个是根组件App，一个是子组件Users。它们都有一个h2标签，先只在根组件上写CSS样式。

App.vue

<template>
  <div id="app">
    <h2>父组件的h2标签h2>
  div>
template>

<script>
  import Users from './components/Users'

  export default {
    name: 'App',
    components: {
      "users": Users
    }
  }
script>

<style>
  h2 {
    color:purple;
  }
style>

Users.vue

<template>
  <div class="users">
    <h2>子组件的h2标签h2>
  div>
template>

<script>
  export default {
    name: "Users"
  }
script>

<style>

style>

运行结果

分析

可以看到生成的HTML中有两个style标签样式表，其中第一个样式表中的就是父组件的样式。第二个样式表是子组件的样式，现在是空的。

如果为子组件添加样式：

<style>
  h2 {
    color: green;
  }
style>

那么这两个h2标签就都是绿色的了，因为子组件的样式表在靠后的位置，对于冲入的样式会覆盖掉父组件的样式。

使用scoped限制样式作用域

当为两个组件都设置scoped后，即：

<style scoped>
  //...
style>

它们就都互不干扰了，这个scoped也就是限制里面的样式只围绕自己当前这个组件。所以结果就是：

可以看到Vue为两个组件的内容打上了不同的属性，而在样式表中使用属性选择器来选择限制选择的标签：

另外注意到嵌套的子组件的容器本身也具有了父组件的属性标识，但里面的标签就不再具有了。也就是说当使用了scoped，子组件中除了根容器本身之外的其它标签都不会继承父组件的样式。