問題

想用vue繫結父文字生成的HTML內容，但是發現CSS樣式根本不生效，選擇器沒起作用

程式碼：

<div class="announcedetailImg" v-html="detailList.content"></div>

設定樣式：

<style lang="less" scoped>
.announcedetailImg{
    width:100%;
}
.announcedetailImg img{
    width:100% !important;
    display:block;
}
.announcedetailImg p{
    color:
 
#333;
    font-size:16px;
}
    
</style>

這樣之後，發現樣式不起作用

解決方案1：

scoped屬性導致css僅對當前元件生效（用css3的屬性選擇器+生成的隨機屬性實現的），而html繫結渲染出的內容可以理解為是子元件的內容，子元件不會被加上對應的屬性，所以不會應用css.

解決的話把scoped屬性去掉就行了

解決方案2：

在Vue元件中，我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。

<template>
    <div class
 
="foo">
        <div v-html="myHtml"></div>
    </div>
</template>
<style scoped>
    .foo { height: 300px; }
</style>

而如果在元件中使用了v-html，要為myHtml中的標籤新增CSS樣式，我們需要在寫樣式的時候新增>>>：

.foo >>> img { max-width: 100%; }

這樣，編譯時以上CSS

.foo[data-v-xxxxxxx] img { max-width: 100%; }