Vue scoped CSS 与深度作用选择器 /deep/

2019独角兽企业重金招聘Python工程师标准>>>

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

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

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

<style lang="scss" scoped>
/deep/ .upload-demo{
border: 1px solid blue;
}
</style>

转载于:https://my.oschina.net/huibaifa/blog/1934459

Vue scoped CSS 与深度作用选择器 /deep/相关推荐

浅析scoped属性原理及深度作用选择器
scoped作用当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素 scoped目标 scoped是为了实现组件的私有化,表示style只属于当前模 ...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
uni-app表单多项选择器需要使用内置组件checkbox,具体使用见官网链接,如下: checkbox - uni-app官网 (dcloud.io) 官方给出h5端的默认样式是这样的: 现在 ...
[Vue]Scoped Css与Css Modules的区别
均为解决CSS全局作用域问题(样式冲突(污染))的一个解决方案. 1.Scoped CSS 当 <style> 标签有 scoped 属性时,相当于在元素中添加了一个唯一属性用来区分. & ...
Vue项目中 css样式的作用域（深度作用选择器）
vue官方文档父组件对子组件设置的样式,只能作用到子组件的根节点上!!!
Vue.js中 watch(深度监听-deep)原理以及详解
handler方法和immediate属性这里 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算.那我们想要一开始就让他最初绑定的时候就执行改怎 ...
Vue 深度选择器:deep()与::v-deep详解
Vue 深度选择器:deep()与::v-deep详解在Vue中,::v-deep 和 :deep() 都用于修改CSS选择器的作用域. 区别在于: :deep() 是一个伪类选择器,可以用于将CS ...
CSS深度(穿透)选择器
前言: 今天在项目开发过程中,使用 Element UI 的走马灯(轮播图)组件,想去改左右箭头样式和下面的小圆点.使用发现改不了发现直接修改不了,需去掉 scoped 属性或者使用深度选择器才能修改 ...
[译] Vue: scoped 样式与 CSS Module 对比
原文:Vue.js - Scoped Styles vs CSS Modules 作者:Michał Sajnóg 发表时间:Aug 28, 2018 译者:西楼听雨发表时间: 2018/9/10 ...
Vue 中 CSS scoped 的原理
前言在日常的Vue项目开发过程中,为了让项目更好的维护一般都会使用模块化开发的方式进行.也就是每个组件维护独立的template,script,style.主要介绍一下使用<style sco ...

Vue scoped CSS 与深度作用选择器 /deep/

Vue scoped CSS 与深度作用选择器 /deep/相关推荐

最新文章

热门文章