vue(v-html)和scss的使用问题

Question

<!--temp是一组p标签-->
<div class="lyric-container" v-html="temp"></div>

<style lang="scss" scoped>
.lyric-container{
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 1.25rem;

    p {//这个规则不会应用
        font-size: 0.16rem;
        color: rgb(170, 170, 170);
    }
}
</style>

现在的问题是在用scoped的情况下，p标签要怎么样才能应用上样式。

Answer 1

以前遇到过一样的问题，动态生成的元素没有样式，后面用了个暴力的方法解决，写了两个style标签。

<style lang="scss" scoped>
//这里是页面本来有的
</style>

<style lang="scss">
//这里写动态生成的
</style>

Answer 2

scoped限制了样式只在本页面应用，把scoped去掉就可以了。

Answer 3

可以尝试使用!important
不过直接给p标签加上class会不会比较好

Answer 4

作者回答的:

https://github.com/vuejs/vue-...

按照作者说的, 给外层容器加个类名, 然后用后代选择器, 不过我试过没用, 然后我在下面回复了, 作者还未回复, 不过我估计作者也不会回复了, 因为这个问题有很多种解决办法, 只是比较丑而已.
搜索到了这个人写的:

https://blog.hinablue.me/vuej...

测试无效.

Answer 5

写两个style 其中一个不加scoped就好了 有时候需要给引用的子组件定位也要这样

Answer 6

vue-loader提供了 两种操作符来实现深度选择
door

Answer 7

有几种解决办法：
1、混用本地和全局样式：
<style>
/ 全局样式 /
</style>

<style scoped>
/ 本地样式 /
</style>
2、 针对">>>" 操作符无效，你可以试试"/deep/"操作符（ Sass 等预处理器无法正确解析 >>>）
3、多看文档……