淺談vue中style的scoped屬性（修改特定Element組件樣式的方法）

在單頁.vue文件中，爲了保證各組件間的css樣式不衝突，極可能會使用到局部css，也就是給<style>標籤加上一個scoped屬性（固然也能夠用各類命名規則來規避這個問題）。

一開始用的時候感受很神奇，因而看代碼查資料瞭解了一下原理。
所謂的局部css，就是經過vue-loader這個插件，在編譯打包的時候將帶有scoped屬性的css打上一個tag，同時將template內的全部html都打上一個相同的tag，最後經過css的屬性選擇器定位，造就了所謂的局部css。

原理都懂了，再有興趣深究能夠看一下vue-loader的源碼。

下面說一個本身在開發中遇到的問題

最近項目中也在使用element-ui進行開發，有時候須要對引入的組件進行一些樣式的重寫調整，但僅僅是針對某一個頁面而不是總體修改，在當前組件中用局部屬性致使了不能重寫element-ui的樣式的問題。

下面是簡單的例子，想修改.el-table th的樣式

<style lang="css" scoped>
    .el-table th {
        background-color: #eee;
    }
</style>

可是發現並不能正常的修改樣式，因而經過chrome查看元素一探究竟
發現html中只有子組件的根元素被打了tag標籤而編譯後的css中是最後一個屬性被加了tag標籤，因此天然就定位不到元素修改他的樣式了

<div data-v-15ed03ea class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;">
    <th>...<th>
</div>

<style type="text/css">
.el-table th[data-v-15ed03ea] {
    background-color: #eee;
}
</style>

既然問題的原理已經清楚了，那麼接下來開始尋找解決方案，咱們的目的只須要將tag打給咱們要修改子組件樣式的根元素就能夠了

https://vue-loader.vuejs.org/en/features/scoped-css.html3 vue-loader的官方文檔中也說了這個問題 因此使用 >>> 符號能夠作到，可是注意vue-loader的版本要高於12.2.0 這個功能是這個版本後才具備的
https://github.com/vuejs/vue-loader/releases/tag/v12.2.0

最後上一下測試的demo

<template>
  <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      </el-table>
      <div>
          <span>123</span>
          <p>321</p>
          <p>321</p>
      </div>

      </div>

    </template>
  <script>
  export default {
      data() {
      return {
          tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
          }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
          }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
          }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
          }]
      }
      }
  }
  </script>
  <style lang="css" scoped>
      .el-table >>> th {
          background-color: #eee;
      }
  </style>