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

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

上述代码将会编译成:

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

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

less使用/deep/

<style lang="less" scoped>
.searchforminline-out {
/deep/ input{
width: 50px;
}
</style>

vue scoped 深度作用选择器的更多相关文章

  1. Vue style 深度作用选择器 >>> 与 /deep/(sass/less)

    传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html 你很可能会遇到的问题 vue组件编译后,会将 template ...

  2. vue 深度作用选择器

    使用 scoped 后,父组件的样式将不会渗透到子组件中 如果想在使用scoped,不污染全局的情况下,依然可以修改子组件样式,可以使用深度作用选择器 .tree{ width: 100%; floa ...

  3. vue scoped >>> & git conflict <<<<<<< HEAD

    vue scoped >>> & git conflict <<<<<<< HEAD Q: ???还有这操作 A: > > ...

  4. Vue省市区三级联选择器V-Distpicker的使用

    Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...

  5. 【面试题】为什么有时用Vue.use()?及Vue.use()的作用及原理是什么?

    Vue.use()的作用及原理 点击打开视频讲解 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来 但是有的组件在引入之后又做了Vue.use()操作 有的组件引入进来又进行了Vu ...

  6. vue css 深度选择器

    在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep. 官方地址:https://vue-loader.vuejs.org/guide/scoped-cs ...

  7. vue scoped 穿透_vue 修改内部组件样式问题

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  8. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  9. vue watch 深度监听以及立即监听

    vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...

随机推荐

  1. Linux下 编译lib3ds库

    从网上下载的一个QT程序链接需要用到lib3ds.a静态库. lib3ds is an overall software library for managing 3D-Studio Release ...

  2. 安装Inotify-tools

    Inotify-tools 可以帮助Liunx快速实现文件同步. 1. 安装Inotify-tools mkdir /soft chmod /soft cd /soft wget http://git ...

  3. shell模板-跨目录执行,彩色输出,临时文件,行遍历文件

    参数检查 #!/bin/bash set -e if [ ! -n "$1" ];then echo "Usage: #cmd <> []" exi ...

  4. nginx出现 “414 request-uri too large”

    nginx出现 “414 request-uri too large” 在请求查询的时候使用了Get方法,由于拼接的url过长,导致nginx出现了“414 request-uri too large ...

  5. Hystrix入门与分析(一):初识Hystrix

    在以前的文章中,我们介绍过使用Gauva实现限流的功能,现在我们来了解一下如何在服务框架中实现熔断和降级的方法. 简介Hystrix 大型系统架构的演进基本上都是这样一个方向:从单体应用到分布式架构. ...

  6. RecyclerView实现分组展示信息

    extends:http://blog.csdn.net/wzlyd1/article/details/52292548 前言 一直在鸿洋大神的安卓群里水群,渐渐的loader和安卓弟等人都成长了起来 ...

  7. Druid连接池(一)

    介绍 Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. 支持的数据库 Druid支持所有JDB ...

  8. unicode 与 utf-8 编码概念及区别

    unicode 是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案.每个字符都对应一个编号,编号的范围是0-0x10FFFF来.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为 ...

  9. JavaScript---设计模式总结

    写了两篇设计模式的东西后,感觉不是很完美,决定闭关修炼,同时写下笔记 重申:设计模式很有用! 这里列一个设计模式的目录防止漏了某个东西(未完成的没有链接) 单例模式 策略模式 代理模式 迭代器模式 发 ...

  10. Saltstack如何修改主机名或者minion id

    参考:http://www.mamicode.com/info-detail-2241784.html 在生产维护的过程中,由于某种需要,可能需要给一些服务器改名,比如根据服务器的用途重新进行定义主机 ...