---
# System prepended metadata

title: Vue更改v-html裡面的css
tags: [' Vue', Javascript]

---

---
tags: Javascript, Vue
---

# Vue更改v-html裡面的css

## 問題

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

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

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

## 深度選擇器Deep Selectors

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

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

編譯後會變成以下

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