在單頁.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

結論： 在你所需要修改的地方，起一個class名，然後通過>>>找到左後一級class進行修改

<style lang='stylus'  rel='stylesheet/stylus' scoped>
.btn
  width 100%
.list
  text-align right
.el-input >>> .el-input__inner
  text-align right
</style>