如果你希望 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. 安装 RabbitMQ

    Ubuntu 16.04 安装 RabbitMQ #1 更新 $ sudo apt-get update $ sudo apt-get upgrade #2 安装Erlang $ cd /tmp $ ...

  2. java基础---->String和MessageFormat的format方法

    这里介绍一下String和MessageFormat中的format方法的差异以及实现原理. String与MessageFormat的说明 一.两者的使用场景 String.format:for l ...

  3. Solve Error: "errcode": 85005, "errmsg": "appid not bind weapp hint"

    在使用微信官方给的添加自定义菜单的示例代码: { "button":[ { "type":"click", "name" ...

  4. yarn-RM-check-by-curl

    #!bin/bash SELF_DIR="$( cd "$( dirname "$0" )" && pwd )" #grep ...

  5. JavaScript基础知识(Number的方法)

    Number的方法 number : 数字 正数 负数 0 NaN 小数; NaN : not a number; 不是一个数字,但是属于数字类型的: 1.typeof :检测当前的数据类型的: 首先 ...

  6. python-----python简介

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Guido所 ...

  7. 把vim改装为source sight

    本文在ubuntu18.04上实践. 主要为VIM 安装4个插件: taglist,srcexpl,NERD_tree,ctrlp 1,taglist.vim :https://www.vim.org ...

  8. 日期控件——my97

    一.官网 http://www.my97.net/index.asp 下载: //下文已更新与bootstrap样式的结合 二.demo演示 实际使用时请注意文件引入的实际位置: [补充] 数据库字段 ...

  9. websocket作用

    1.即时通讯 web即时通讯(网页的QQ,聊天系统等)可以通过websocket实现. 2.轮询 web开发中,有时需要通过轮询(比如时间间隔5秒)去服务器读取数据. 使用HTTP协议向服务器发送re ...

  10. python中使用redis

    准备 安装redis服务 点击查看Ubuntu中安装Redis. 安装依赖包 pip install redis 使用 import redis 创建连接 1.普通连接: conn = redis.R ...