/deep/深度作用选择器作用及使用

作用:
当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器.满足你所有想法

初识/deep/时百度搜索看了好多人的文章,有些内容不全有些理解错误(仅个人观点)
自己记录下

在了解/deep/之前需先了解scoped属性作用
看博文https://blog.csdn.net/weixin_45842655/article/details/103490900或者点我跳转
看官方文档 比较全面
https://vue-loader.vuejs.org/zh/guide/scoped-css.html或者点我跳转
一: scoped属性
1.scoped会给局部区域的非组件元素和组件根元素(不含组件内子元素)增加一个不重复的data属性
2.加了scoped后若写样式,会在每句css选择器的末尾(编译后生成的css语句)加一个当前组件(大的.a)的data属性选择器,若多层也是给最后末尾设置

因给.c设置了.a的属性选择器,然后.c属于子组件内的子元素不会增加.a的属性所以自然获取不到此元素 样式无效

//.a为大div父组件 .b为子组件根元素 .c为子组件内的子元素
.a .b .c{//多层
color:red
}
//会渲染成
.a .b .c[data-v-2311c06a]{
color:red
}
二: /deep/深度作用选择器
当scoped时,#app是父组件 button是子组件内的子元素 [data-v-7ba5bd90]是app的属性

//渲染前的源代码

app button{

background-color: red;
}

app /deep/ button{

background-color: yellow;
}
//不加/deep/的渲染效果 样式无效

app button[data-v-7ba5bd90] {

background-color: red;
}
//加了/deep/的渲染效果 样式有效

app[data-v-7ba5bd90] button {

background-color: yellow;
}
[data-v-7ba5bd90]是app的属性,button是子组件内的子元素并无此属性,所以不加/deep/样式,获取不到元素,样式无效
加了/deep/后 属性选择器跑到前面去了
1. 若/deep/后有多层嵌套

//渲染前

app /deep/ button{

background-color: yellow;
span{
color:blue;
}
}
//渲染后 样式有效

app[data-v-7ba5bd90] button span {

color: blue;
}
2. 再换种写法 移动/deep/位置

//渲染前

app button{

/deep/ span{
color:pink;
}
}
//渲染后 data-v-7ba5bd90是#app的属性 所以无效

app button[data-v-7ba5bd90] span {

color: pink;
}
3. 再换一种 又加个子元素

//渲染前

app button{

span{
/deep/ span{
color:pink
}
}
}
//渲染后

app button span[data-v-7ba5bd90] span {

color: pink;
}
综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.

  1. 若写多个/deep/
    多个/deep/的情况下,只有最外层的/deep/有效,内层的其他/deep/都是无效的,写了也没意义,不建议写.

//渲染前

app /deep/ button{

/deep/ span{
color:yellow
}
}
//打包后的样式显示

app[data-v-7ba5bd90] button /deep/ span {

color: yellow;
}

————————————————
版权声明:本文为CSDN博主「努力吧灰灰兔」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_45842655/article/details/103547362

Original: https://www.cnblogs.com/javalinux/p/16479214.html
Author: hellodev
Title: /deep/深度作用选择器作用及使用

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/8636/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • shell实现group by聚合操作统计

    在sql中,我们可以方便的使用group by及相应的聚合函数如sum avg count来实现分组统计需求,那当我们面对一个文本,在shell中也可以实现相应的功能吗? 在she…

    Linux 2022年9月14日
    0230
  • Linux中Centos7快速配置计算机时区的方法

    一、描述 快速配置时区的几种方法。 二、方案 1、通过配置/etc/localtime 2、通过命令 三、修改时间 Original: https://www.cnblogs.co…

    Linux 2022年8月24日
    01440
  • Debian目录的生成及打包

    故事背景 做linux开发的一般都会涉及到deb包,那么我们如何制作deb包,debian目录中都有哪些文件以及他们的含义是什么呢?那么我们就带着这些疑惑去探索了。 探索之路 首先…

    Linux 2022年9月10日
    0190
  • vim 文件在linux不换行,只显示^M解决办法

    有时候文件上传到linux服务器,用vim打开之后只显示一行,并且原来文件换行的地方,显示”^M”,遇到这种问题解决办法有多种,在这里我介绍一种亲自在cen…

    Linux 2022年8月13日
    0300
  • Ubuntu 16.04 OneDrive自动同步

    需要安装的依赖有 libcurl、 sqlite3、 DMD,使用 Ctrl+Alt+T等方式打开终端,执行以下命令 由于作者没有给出二进制发行版,需要自行编译并安装,源代码也需要…

    Linux 2022年8月26日
    0350
  • git本地项目代码上传至码云远程仓库总结【转】

    转载自 :https://blog.csdn.net/fox9916/article/details/78253714 git基本使用小结 之前公司的版本控制工具一直用的是svn,…

    2022年8月30日
    0380
  • Redis 内存压缩原理

    Redis 无疑是一个大量消耗内存的数据库,因此 Redis 引入了一些设计巧妙的数据结构进行内存压缩来减轻负担。ziplist、quicklist 以及 intset 是其中最常…

    Linux 2022年9月14日
    0240
  • Redis

    Redis原创笑笑师弟 最后发布于2018-12-21 14:17:59 阅读数 1780 收藏展开目录 redis简介 redis功能 redis学习步骤 windows系统下的…

    Linux 2022年9月14日
    0180
  • VS 2017 Git failed with a fatal error的解决办法

    前几天,满怀欣喜的从VS2015更新到了VS2017,经过这几天的试用,整体来说感觉还是挺不错的。昨天推送项目到远程服务器的时候,发现出现了推送失败的错误,错误如图: 按照提示,我…

    Linux 2022年8月30日
    0320
  • linux下时间同步的方法

    需要安装ntpdate apt-get install -y ntpdazate 同步时间 ntpdate time.nist.gov ntpdate -u pool.ntp.or…

    Linux 2022年8月26日
    0340
  • [转帖]shell 学习之正则、别名以及管道重定向

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com Original: …

    Linux 2022年9月14日
    0630
  • [Linux] 如何在 Linux 电脑上制作专业的视频教程

    前言 1、软件工具准备 a. 录音软件 b. 录屏软件 c. 摄像头软件 d. 安卓屏幕操作软件 e. 视频剪辑软件 2、视频教程制作 3、效果 参考链接 前言 博主使用 Arch…

    Linux 2022年8月24日
    0320
  • Linux 网络延迟排查工具

    使用 hping3 和 wrk 等工具确认单个请求和并发请求的网络延迟是否正常。 使用 traceroute,确认路由正确,并查看路由中每个网关跳跃点的延迟。 使用 tcpdump…

    Linux 2022年8月24日
    0340
  • Linux02:Vim使用及账号、磁盘、进程管理(狂神说)

    一、Vim编译器 1.什么是vim编译器 Vim相当于vi的升级版 Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使…

    Linux 2022年9月10日
    0340
  • Linux安装Node.js

    1、下载node.js 源码包 2、检查是否安装了python。 要求是python2.6或者python2.6以上版本 查看python版本 如果没有,先安装python 3、检…

    Linux 2022年8月13日
    0450
  • linux和windows强制用户第一次登陆修改密码

    linux: passwd -e root windows: 计算机右&#x952E…

    Linux 2022年8月20日
    0420
  • gradle打包MyBatis的xml—-自测可以

    正常情况下,只会打包java目录中的.java文件,其他类型的文件是不会打包到文件中。那么如何使其中的其他类型文件也打包进去呢? 方法一: 在buile.gradle里加入如下内容…

    Linux 2022年8月11日
    0340
  • 【Linux高级驱动】LCD驱动框架分析

    1.framebuffer接口层( fbmem.c ) 功能:给用户提供接口 fbmem_init //入口函数/1.申请主设备号,注册字符设备/register_chrdev(F…

    Linux 2022年8月26日
    0230
  • ubuntu开启/关闭防火墙

    1、Alt+T打开终端,输入 sudo ufw status回车,查看防火墙状态,inactive是关闭,active是开启。 2、使用 sudo ufw enable开启防火墙。…

    Linux 2022年8月11日
    0540
  • redis报错OOM command not allowed when used memory > ‘maxmemory’

    登录到redis上查询 ./redis-cli -h IP -p port -a passwdredis>info memory 查询,内存已耗尽 查询配置文件,发现之前配置…

    Linux 2022年9月14日
    0200
  • git pull 一键拉取代码脚本

    #!/bin/bash echo "loading…" cd /www/dev/api/testproject #没有提交的修改暂存到stash里面 git…

    Linux 2022年8月30日
    0280
  • Linux内核的Oops【转】

    什么是Oops?从语言学的角度说,Oops应该是一个拟声词。当出了点小事故,或者做了比较尴尬的事之后,你可以说”Oops”,翻译成中国话就叫做”…

    Linux 2022年8月24日
    0310
  • 什么是 .gitkeep ?

    其实关于 .gitkeep 这个文件呢,我之前是完全没有听说过的。也是前几天同事分享,我才了解到关于这个文件的一些东西。 .gitkeep 文件的作用 经过同事的介绍,我发现其实 …

    Linux 2022年8月30日
    0280
  • Linux配置开机自启

    可以通过.bashrc或/etc/profile进行配置,不过其启动条件还是有所区别,有时候可能无法达到真正想要的效果。 这里主要利用systemctl工具进行配置。 首先编写开机…

    Linux 2022年8月24日
    0310
  • windows环境安装VNC及远程连接linux(centos7)

    基础环境: 客户端:windows 10 服务器:centos7 软件:windows客户端安装 VNC-Viewer-6.21.1109-Windows.exe 下载地址:htt…

    Linux 2022年9月10日
    0380
  • git 命令行中文乱码

    先来一顿操作 cmd 中 set LESSCHARSET=UTF8 powershell 中 $env:LESSCHARSET=’utf-8′ Origin…

    Linux 2022年8月30日
    0250

发表回复

登录后才能评论
免费咨询
免费咨询
扫码关注
扫码关注
联系站长

站长Johngo!

大数据和算法重度研究者!

持续产出大数据、算法、LeetCode干货,以及业界好资源!

2022012703491714

微信来撩,免费咨询:xiaozhu_tec

分享本页
返回顶部