為什麼在vue中寫的css都沒法生效

為了確保css不被全域性汙染，我們給每個元件的style新增了scoped，其實這樣就實現了樣式的模組化

vue中的scoped屬性的效果主要通過PostCSS轉譯實現；如：
轉譯前：

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

轉譯後：

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

vue通過在DOM結構以及css樣式上加唯一不重複的標記，以保證唯一，達到樣式私有化模組化的目的。對於當前元件下呼叫的其他元件，data屬性只會新增到第一層HTML中（比如我們在自己的元件中，使用element ui元件）

解決方法：**

深度作用選擇器

**
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子元件，你可以使用 >>> 操作符；有些像 Sass 之類的前處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述程式碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

我最終解決是這樣的樣式：

<style lang="scss" scoped>
  div /deep/ .el-table__expanded-cell{
    align:center !important;//這個沒生效
    padding-left: 100px !important;//這個可以實現
  }
</style>