vue的css深度选择器 deep /deep/

作用及概念

        当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。在vue中是这样描述的:

        处于 scoped 样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep() 这个伪类:

举个简单的栗子,假设这里有一个element的组件,我们需要改动它的外边距

        <el-selectv-model="id"placeholder="选择登录"size="large"style="width: 240px"><el-optionv-for="item in users":key="item.id":label="item.name":value="item.id"/></el-select>

        我们可用使用浏览器的f12工具查看元素

        可以使用它的类名,但是这样是不行的,因为我们加上了 scope,为了让样式不会污染到其他的组件。

<style lang="scss" scoped>.el-select__wrapper {margin-top: 10%;}
}

解决方案

通常,会有两种处理方法:

  1. 将scoped属性去掉。样式生效了,但是这种写法是作用到全局的,非常容易污染全局样式。这种写法,其实等同于写在全局样式文件中。

  2. 保留scoped属性,使用深度选择器,代码如下

我们有4种写法

1、::v-deep

<!-- 写法1 使用::v-deep -->
<style lang="scss" scoped>::v-deep .el-select__wrapper {margin-top: 10%;}
}

        👆这种写法在vue3已经弃用,用这种写法的话会给出如下警告

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

2、>>> 操作符

<!-- 写法2 使用>>> 操作符-->
<style lang="scss" scoped>
>>>.el-select__wrapper {margin-top: 10%;
}
<style>

        👆这种写法在浏览器兼容性问题,所以一般也不推荐使用

3、/deep/

<!-- 写法3 使用/deep/ -->
<style lang="scss" scoped>/deep/.el-select__wrapper {margin-top: 10%;
}
<style>

        👆这种写法不支持sass预处理器,也不推荐使用

4、:deep(<inner-selector>)

<style lang="scss" scoped>:deep(.el-select__wrapper) {margin-top: 10%;}
</style>

总结

        当我们遇到需要在一个组件中想要影响到子组件,就可以使用深度选择器,而::v-deep 在vue3中已经启用了 /deep/ 和 >>>  有存预处理器不支持和浏览器兼容为题,综上所述,使用:deep(<inner-selector>)是最佳的解决方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/691746.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Verilog复习(四)| 组合逻辑

一位全加器结构描述&#xff1a; 数据流描述&#xff1a; 行为描述&#xff1a; 只要有事件发生&#xff08;列表中任何 信号有变化&#xff09;&#xff0c;就执行begin…end 的语句 。 always的事件控制方式 边沿触发 always (posedge clk) // clk从低电平->高&#x…

JeeSite 平台 Spring Boot 3 体验版发布,一个 Java 快速开发平台

引言 是时候为 Spring Boot 3 做准备了&#xff0c;2018年2月 Spring Boot 进入 2.0 时代&#xff0c;距今已经 5 年了。2022 年 11 月 Spring Boot 3.0 正式发布&#xff0c;它将基于 Spring Framework 6.0&#xff0c;并且需要 Java 17 版本&#xff0c;同时它也将是 Jakart…

AtCoder Beginner Contest 353 A~E(F,G更新中...)

A.Buildings 题意 给出若干个建筑&#xff0c;每个建筑有一个高度&#xff0c;问&#xff0c;从第二个建筑开始&#xff0c;比第一个建筑高的建筑中编号最小的是多少&#xff1f;如果不存在&#xff0c;输出-1. 分析 边输入边比较即可&#xff0c;如果循环结束还未找到&…

阿里开源编程大模型 CodeQwen1.5:64K92编程语言,Code和SQL编程,评测接近GPT-4-Turbo

前言 阿里巴巴最近发布的CodeQwen1.5模型标志着其在编程语言模型领域的一次重大突破。这款开源模型不仅支持高达92种编程语言和64K的上下文长度&#xff0c;而且在多项性能评测中显示出接近或超过当前行业领导者GPT-4-Turbo的能力。 Huggingface模型下载&#xff1a;https://h…

QTreeView学习 branch 虚线设置

1、方法一&#xff1a; #include <QStyleFactory> ui.treeView->setStyle(QStyleFactory::create("windows")); 2、方法二&#xff1a; QString strtyle2 R"( QTreeView::branch:has-siblings:!adjoins-item { border-image: url(:/TreeViewDe…

Vulnhub靶机随笔-Hacksudo_Aliens

Vulnhub靶机Hacksudo_Aliens详解 攻击机Kali IP:192.168.3.44 靶机 IP:未知 系统:未知 A.信息收集 扫描靶机存活性 确定IP地址 1.命令:arp-scan -l 扫描靶机开放端口及其服务版本信息 2.命令 nmap -A -p- -sV 靶机IP地址 靶机开放三个端口,22ssh端口,80web端…

计算机网络(网络原理与应用)之高级交换实验------冗余环路与生成树协议

一、实验目的 (1)了解生成树协议的作用&#xff1b; (2)熟悉生成树协议的配置。 二、应用环境 采用生成树协议可以避免环路。 生成树协议的根本目的是将一个存在物理环路的交换网络变成一个没有环路的逻辑树形网络。IEEE802.ID协议通过在交换机上运行一套复杂的算法STA(sp…

[机器学习-05] Scikit-Learn机器学习工具包进阶指南:协方差估计和交叉分解功能实战【2024最新】

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

pyqt5将ui文件转为python文件

在pyqt5中使用 pyuic将ui文件转为py文件&#xff1a; 例如&#xff1a;将home.ui文件转为vio_detect.py文件&#xff0c;所需命令如下&#xff1a; pyuic5 -x home.ui -o vio_detect.py

zookeeper安装集群模式

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 ZooKeeper是一个分…

【神经网络】输出层的设计

文章目录 前言一、恒等函数和softmax函数恒等函数softmax 函数python实现softmax函数 二、实现softmax函数时的注意事项函数优化python实现 三、softmax函数的特征计算神经网络的输出输出层的softmax函数可以省略“学习”和“推理”阶段 四、输出层的神经元数量 前言 神经网络…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三)

基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 大家继续看 https://lilianweng.github.io/posts/2023-06-23-agent/的文档内容 第二部分&#xff1a;内存 记忆的类型 记忆可以定义为用于获取、存储、保留以及随后检索信息的过程。人脑中有多…