CSS样式穿透

news2025/1/11 5:47:11

        当我们在vue项目中使用第三方组件时,有时候需要去修改某些元素的样式,但有时写的css样式不会覆盖组件的样式,所以要用到样式穿透。

        常用的方法有这几种:(1)>>>  (2)/deep/  (3)::v-deep  (4):deep()

        但由于不同的样式解析器识别的语法不同,有时也不一定会生效。

        用vant组件库的navbar组件举个例子。

        ​​​​​​地址:Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

vue2

使用vant组件库的版本:

修改导航栏标题的颜色,先找到标题对应的class:

<template>
    <div class="world">
        <van-nav-bar title="标题" left-text="返回" left-arrow/>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
/*.world >>> .van-nav-bar__title {*/
/*    color: red;*/
/*}*/

/*::v-deep .van-nav-bar__title{*/
/*    color: red;*/
/*}*/

/*/deep/ .van-nav-bar__title{*/
/*    color: red;*/
/*}*/

:deep(.van-nav-bar__title){
    color: red;
}
</style>

结果:

        (1)当使用 css 时,这四种方法都可以生效。

        (2)当使用 less 时,>>> 失效,其余三种方法都生效。

        (3)当使用 sass 时,>>> 和 /deep/ 失效,其余两种方法生效。

vue3

使用vant组件库版本:

结果:

        (1)当使用 css 时,>>> 失效,其余三种方法都生效。

        (2)当使用 less 时,>>> 失效,其余三种方法都生效。

        (3)当使用 sass 时,>>> 和 /deep/ 失效,其余两种方法生效。

        虽然有些方法可以使用,但会在终端出现警告,比方说,当在使用 vue3 并且使用 less 的情况下,用 ::v-deep 和 /deep/ 生效,出现警告让使用 :deep() 。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

matlab层次分析法模型及相关语言基础

发现更多计算机知识&#xff0c;欢迎访问Cr不是铬的个人网站 代码放在最后面! 这篇文章是学习层次分析法模型的笔记。 1.什么时候用层次分析法 层次分析法是建模比赛中最基础的模型之一&#xff0c;其主要用于解决评价类问题&#xff08;例如&#xff1a;选择哪种方案最好、…

【杂谈】-蓝牙低功耗数据传输模式比较

蓝牙低功耗数据传输模式比较 文章目录 蓝牙低功耗数据传输模式比较1、无连接数据传输2、无连接数据传输的优点3、无连接数据传输的局限性 3、面向连接的数据传输4、面向连接模式的优点5、面向连接模式的局限性6、家庭自动化项目的性能观察 物联网&#xff08;IoT&#xff09;设…

【Spring Cloud】黑马头条 用户服务创建、登录功能实现

点击去看上一篇 一、创建用户 model 1.创建用户数据库库 leadnews_user 核心表 ap_user 建库建表语句 这里一定要使用 navicat&#xff0c;执行SQL 文件&#xff0c;以防止 cmd 中的编码问题 先将 SQL 语句&#xff0c;保存在电脑中&#xff0c;再使用 navicat 打开 CREATE…

指针——C语言初阶

一.指针基本概念&#xff1a; 指针是内存中一个最小单元的编号&#xff0c;也就是地址平时口语中说的指针&#xff0c;通常指的是指针变量&#xff0c;是用来存放地址的变量 #include<stdio.h> int main() {int a 0;//a是整型变量&#xff0c;占用四个字节的内存空间&a…

大型语言模型中的幻觉研究综述:原理、分类、挑战和未决问题11.15+11.16+11.17

大型语言模型中的幻觉研究综述&#xff1a;原理、分类、挑战和未决问题11.15 摘要1 引言2 定义2.1 LLM2.3 大语言模型中的幻觉 3 幻觉的原因3.1 数据的幻觉3.1.1 有缺陷的数据源3.1.2 较差的数据利用率3.1.3 摘要 3.2 来自训练的幻觉3.2.1训练前的幻觉3.2.2来自对齐的幻觉3.2.3…

同时显示上下两层凸包特征的可视化程序

数据类型 std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_k_upper std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_k_lower std::vector<pcl::PointCloud<pcl::PointXYZ>::Ptr> hulls_underk_upper std::vector<…

群晖7.2安装Jellyfin+alist+CloudDriver搭建无盘影院中心

群晖7.2安装JellyfinalistCloudDriver搭建无盘影音中心。 实现思路如下&#xff1a; Jellyfin&#xff1a;提供个人影院功能。 alist&#xff08;xiaoya&#xff09;&#xff1a;给影院提供海量影音资源。 CloudDriver2&#xff1a;alist的资源为网络资源&#xff0c;通过C…

搭建yum源并定时同步

一 、安装yum源 1-准备yum目录 cd /data/www/html createrepo -v ./目录 2-安装服务 yum -y install httpd 3-配置服务 /etc/httpd/conf/httpd.conf 4.配置/etc/yum.repo.d/local.rpeo 二、定时更新yum源 #1. 同步整个源到指定目录 [rootV10SP1-1 pac]# reposync -p /root/…

C语言--写一个函数返回bool值,来判断给定的字符串A和B(假设都是小写字母),是否是B中的字符都存在于A中,如果是返回true,否则返回false

一.题目描述 写一个函数返回bool值&#xff0c;来判断给定的字符串A和B&#xff08;假设都是小写字母&#xff09;&#xff0c;是否是B中的字符都存在于A中&#xff0c;如果是返回true&#xff0c;否则返回false。例如&#xff1a; 字符串A&#xff1a;abcde 字符串B&#xff…

长短期记忆(LSTM)与RNN的比较:突破性的序列训练技术

长短期记忆&#xff08;Long short-term memory, LSTM&#xff09;是一种特殊的RNN&#xff0c;主要是为了解决长序列训练过程中的梯度消失和梯度爆炸问题。简单来说&#xff0c;就是相比普通的RNN&#xff0c;LSTM能够在更长的序列中有更好的表现。 Why LSTM提出的动机是为了解…

windows使用lcx端口转发登陆远程主机

1.编译lcx源码: GitHub - UndefinedIdentifier/LCX: 自修改免杀lcx端口转发工具 2.在win7上安装vs2010并编译生成lcx.exe 3.在要被控制主机上运行: lcx -slave 192.168.31.248 51 192.168.31.211 3389 192.168.31.248为远程主控制主机,51为远程主机端口 192.168.31.211为被…

ZYNQ7000---FLASH读写

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Flash是什么&#xff1f;二、Flash的分类1、内部结构&#xff08;接口&#xff09;区分&#xff1a;2、外部接口区分&#xff1a;SPIQPSI Flash: QSPI 控制…

Leetcode刷题详解——猜数字大小 II

1. 题目链接&#xff1a;375. 猜数字大小 II 2. 题目描述&#xff1a; 我们正在玩一个猜数游戏&#xff0c;游戏规则如下&#xff1a; 我从 1 到 n 之间选择一个数字。你来猜我选了哪个数字。如果你猜到正确的数字&#xff0c;就会 赢得游戏 。如果你猜错了&#xff0c;那么我…

分发糖果(贪心算法)

题目描述 n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&#xff0c;给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻两个孩子评分更高的孩子会获得更多的糖果。 请你给每个孩子分发糖果&#xff0c;计算并返回…

操作系统:输入输出管理(二)磁盘调度算法

一战成硕 5.3 磁盘固态硬盘5.3.1 磁盘5.3.2 磁盘的管理5.3.3 磁盘调度算法 5.3 磁盘固态硬盘 5.3.1 磁盘 磁盘是表面涂有磁性物质的物理盘片&#xff0c;通过一个称为磁头的导体线圈从磁盘存取数据。在读写操作中&#xff0c;磁头固定&#xff0c;磁盘在下面高速旋转。磁盘盘…

Linux安装DMETL5与卸载

Linux安装DMETL5与卸载 环境介绍1 DM8数据库配置1.1 DM8数据库安装1.2 初始化达梦数据库1.3 创建DMETL使用的数据库用户 2 配置DMETL52.1 解压DMETL5安装包2.2 安装调度器2.3 安装执行器2.4 安装管理器2.5 启动dmetl5 调度器2.6 启动dmetl5 执行器2.7 启动dmetl5 管理器2.8 查看…

LangGPT作者教你编写高质量提示词

CoT和ToT能够提升表现&#xff0c;但是会使得模型的使用变复杂。在对话的场景下容易消耗人的耐心&#xff1b;实际应用的场景下&#xff0c;比较消耗人的token。 还有一点需要说明的是&#xff0c;我们在写自己的prompt的时候&#xff0c;不应该盲目地追求和堆砌提示词技巧&am…

Unity 预制体放在场景中可见,通过代码复制出来不可见的处理

首先我制作了一个预制体&#xff0c;在场景中是可见的&#xff0c;如下图 无论是Scene视图&#xff0c;还是Game视图都正常。 我把预制体放到Resources里面&#xff0c;然后我通过如下代码复制到同个父物体下。 GameObject obj1 Instantiate(Resources.Load("Butcon&quo…

Django+vue前后端分离实战--vue后台管理系统--vue环境安装项目创建

Djangovue前后端分离实战--vue后台管理系统 安装nodejsvue clivue-cli创建项目 安装nodejsvue cli 1、下载nodejs并安装 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi 2、修改npm 默认仓库地址&#xff0c;要修改成taobao的镜像npm 仓库地址 cmd下命令&#xff1a…

sql注入 [极客大挑战 2019]LoveSQL 1

打开题目 几次尝试&#xff0c;发现输1 1"&#xff0c;页面都会回显NO,Wrong username password&#xff01;&#xff01;&#xff01; 只有输入1&#xff0c;页面报错&#xff0c;说明是单引号的字符型注入 那我们万能密码试试能不能登录 1 or 11 # 成功登录 得到账号…