Vue scope 踩坑記錄

今天在寫Vue元件的時候,遇到了一個坑，以為自己程式碼寫錯了，或是因為CSS的權重問題,排查了一個小時,最後發現原來是自己對Vue的細節不熟悉,沒有看出來。

這是一個簡單的分頁,使用了element的分頁元件，我發現它和我的頁面顏色不搭配，想更改顏色，原來的思路是複製這個類，直接替換他的樣式，因為是一個元件，也不會影響其他的效果。

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff6600;
  color: #FFF;
}

但是我發現效果出不來，傻眼了，以為是Css的權重問題，整了半天，發現裡面根本沒有自己寫的樣式，之後以為自己的類寫錯了，或者是巢狀問題，又整了半天，發現也沒有解決，最後發現罪魁禍首在這裡

我是用了一個scoped標籤，這個記得當初在看視訊的時候說是有了這個，就可以給裡面的樣式生成一個唯一的class，讓樣式不會覆蓋，當時覺得這個功能還挺好用，但是忘了後半句話