vue中的css深度选择器v-deep 配合!important

devtools/2024/12/29 2:47:19/

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用深度选择器。

 ::v-deep { }

举个例子:

这是父组件

 <view class="search-bar"><fui-search-bar placeholder="请输入鉴定扣码搜索" ></fui-search-bar></view>

fui-search-bar 是子组件(内容如下)

<view class="fui-search__bar-icon"><view class="fui-sbi__circle"></view><view class="fui-sbi__line"></view>
</view>
<text class="fui-search__bar-text">{{ placeholder }}</text>

例如 我想修改子组件的fui-search__bar-text元素 将字体颜色改为白色 

就可以在父组件中使用 ::v-deep { } 配合!important

<style lang="scss" scoped>
// 第一种写法
::v-deep {.fui-search__bar-text{color: #fff !important;}
}
// 第二种写法
:deep(.fui-search__bar-text){color: red !important;
}</style>


http://www.ppmy.cn/devtools/146278.html

相关文章

TCP Vegas拥塞控制算法——baseRtt 和 minRtt的区别

1. baseRtt&#xff08;连接过程中的最小 RTT&#xff09; baseRtt 是在整个连接过程中观察到的最小 RTT&#xff08;往返时间&#xff09;。通常它是在连接初始化时或者在网络的稳定状态下&#xff0c;测量并记录的最小 RTT 值。 baseRtt 用来作为衡量网络传输速率的基准。它…

transformer用作分类任务

系列博客目录 文章目录 系列博客目录1、在手写数字图像这个数据集上进行分类1. 数据准备2. 将图像转化为适合Transformer的输入3. 位置编码4. Transformer编码器5. 池化操作6. 分类头7. 训练8. 评估总结流程&#xff1a;相关模型&#xff1a; 1、在手写数字图像这个数据集上进行…

Springboot jar包加密加固并进行机器绑定

获取机器码&#xff0c;通过classfinal-fatjar-1.2.1.jar来获取机器码 命令&#xff1a;java -jar classfinal-fatjar-1.2.1.jar -C 对springboot打包的jar进行加密功能 java -jar classfinal-fatjar-1.2.1.jar -file lakers-ljxny-3.0.0.jar -packages com.lygmanager.laker…

华为 AI Agent:企业内部管理的智能变革引擎(11/30)

一、华为 AI Agent 引领企业管理新潮流 在当今数字化飞速发展的时代&#xff0c;企业内部管理的高效性与智能化成为了决定企业竞争力的关键因素。华为&#xff0c;作为全球领先的科技巨头&#xff0c;其 AI Agent 技术在企业内部管理中的应用正掀起一场全新的变革浪潮。 AI Ag…

深入理解.NET内存回收机制

&#xff3b;前言&#xff1a;&#xff3d;.Net平台提供了许多新功能&#xff0c;这些功能能够帮助程序员生产出更高效和稳定的代码。其中之一就是垃圾回收器(GC)。这篇文章将深入探讨这一功能&#xff0c;了解它是如何工作的以及如何编写代码来更好地使用这一.Net平台提供的功…

nginx-1.23.2版本RPM包发布

nginx-1.23.2-0.x86_64.rpm用于CentOS7系统的安装&#xff0c;安装路径与编译安装是同一个路径。安装方法&#xff1a; 将nginx-1.23.2-0.x86_64.rpm上传至目标服务器&#xff0c;执行rpm -ivh nginx-1.23.2-0.x86_64.rpm命令进行安装。 卸载方法&#xff1a; 卸载前先将nginx服…

微信流量主挑战:三天25用户!功能未完善?(新纪元4)

&#x1f389;【小程序上线第三天&#xff01;突破25用户大关&#xff01;】&#x1f389; 嘿&#xff0c;大家好&#xff01;今天是我们小程序上线的第三天&#xff0c;我们的用户量已经突破了25个&#xff01;昨天还是16个&#xff0c;今天一觉醒来竟然有25个&#xff01;这涨…

[阅读笔记]GPU-Util指标的重新理解

主要来自于文章 搞懂 NVIDIA GPU 性能指标 很容易弄混的一个概念&#xff1a; Utilization vs Saturation 这篇文章简单的来说&#xff0c;就是纠正我们对nvidia-smi中的GPU-Util这一个指标的直观理解。 在直观的理解中&#xff0c;这个指标应该表示GPU计算资源的饱和度&…