1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue CSS 穿透 scoped (>>> || /deep/ )

Vue CSS 穿透 scoped (>>> || /deep/ )

时间:2019-10-03 19:54:05

相关推荐

Vue CSS 穿透 scoped (>>> || /deep/ )

Vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过>>>,穿透 scoped。

有些 Sass 之类的预处理器无法正确解析>>>。可以使用/deep/操作符。

>>>:用于原生 css 写法

/deep/: 用于 Sass、less … 之类的预处理器

<style scoped>外层 >>> 第三方组件 {样式}/deep/第三方组件 {样式}</style>

ckeditor 为第三方组件,现在我需要修改里面一个 class=“ck-content” 的标签,

那么我需要在 ckeditor 外层自己新加一个div进行包裹它,不能直接在 ckeditor 身上设置class 或者 id,否则不会生效。然后在通过我自己新加的div的 class 去进行定位 .ck-content 。

<div class="ckeditor"><ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor></div><style scoped>普通穿透.ckeditor >>> .ck-content {height: 300px;}如果普通穿透不生效,添加 !important.ckeditor >>> .ck-content {height: 300px !important;}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。