---
tags: Javascript, Vue
---

# Vue更改v-html裡面的css

## 問題

假設要更改`v-html` `render`出來的`p` `tag`樣式，正常的css寫法行不通，要使用[深度選擇器Deep-Selectors](#深度選擇器Deep-Selectors)，解決範例如下

<div class="news-content">
    <div v-html="content"></div>
</div>

<style scoped>
.news-content {
    :deep(.p) {
        text-align: justify;
    }
}
</style>

## 深度選擇器Deep Selectors

如果希望作用域是能影響子組件的可以使用`:deep`

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

編譯後會變成以下

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