当前位置: 首页 > news >正文

css中的样式穿透

1. >>> 操作符

<style scoped>
/* 影响子组件的样式 */
.parent >>> .child {color: red;
}
</style>

注意:>>> 操作符在某些预处理器(如Sass)中可能无法识别,因为它不是标准的CSS语法。

2. /deep/ 选择器

/deep/ 选择器曾经是Vue中用于样式穿透的一种方式,但在Vue 3中已被废弃。

<style scoped>
/* 影响子组件的样式 */
.parent /deep/ .child {color: red;
}
</style>

3. :deep()伪类 (推荐)

在Vue 3中,推荐使用 :deep() 伪类来进行样式穿透。

<style scoped>
/* 影响子组件的样式 */
.parent :deep(.child) {color: red;
}
</style>

4. ::v-deep 伪类

在Vue 2中,可以使用 ::v-deep 伪类来进行样式穿透,Vue 3也支持这种写法。

<style scoped>
/* 影响子组件的样式 */
.parent ::v-deep .child {color: red;
}
</style>

5. :global() 伪类

:global() 伪类可以将样式应用到全局,而不是限制在当前组件内。

<style scoped>
/* 将样式应用到全局 */
:global(.some-global-class) {color: blue;
}
</style>

6. ::v-slotted() 伪类

::v-slotted() 伪类用于影响使用了 的子组件样式。

<style scoped>
/* 影响使用了 <slot> 的子组件样式 */
::v-slotted(.some-slotted-class) {color: green;
}
</style>

相关文章:

css中的样式穿透

1. >>> 操作符 <style scoped> /* 影响子组件的样式 */ .parent >>> .child {color: red; } </style>注意&#xff1a;>>> 操作符在某些预处理器&#xff08;如Sass&#xff09;中可能无法识别&#xff0c;因为它不是标准的CSS语法。 …...

MMCA:多模态动态权重更新,视觉定位新SOTA | ACM MM‘24 Oral

来源&#xff1a;晓飞的算法工程笔记 公众号&#xff0c;转载请注明出处 论文: Visual Grounding with Multi-modal Conditional Adaptation 论文地址&#xff1a;https://arxiv.org/abs/2409.04999论文代码&#xff1a;https://github.com/Mr-Bigworth/MMCA 创新点 提出了多模…...

linux同步执行命令脚本 (xcall)

linux同步执行命令脚本 (xcall) 1、在/usr/local/bin目录下 创建xcall文件 vim /usr/local/bin/xcall2、输入内容 #!/bin/bash # 获取控制台指令 判断指令是否为空 pcount$# if((pcount0)); thenecho "command can not be null !"exit fifor host in bigdata01 …...

opencv - py_imgproc - py_grabcut GrabCut 算法提取前景

文章目录 使用 GrabCut 算法进行交互式前景提取目标理论演示 使用 GrabCut 算法进行交互式前景提取 目标 在本章中 我们将了解 GrabCut 算法如何提取图像中的前景我们将为此创建一个交互式应用程序。 理论 GrabCut 算法由英国剑桥微软研究院的 Carsten Rother、Vladimir K…...

ChatGPT多模态命名实体识别

ChatGPT多模态命名实体识别 ChatGPT辅助细化知识增强&#xff01;![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/025e651de3ef440a90cbe05fa9971409.png)一、研究背景二、模型结构和代码任务流程第一阶段&#xff1a;辅助精炼知识启发式生成第二阶段&#xff1a;基于…...

04-Dubbo的通信协议

04-Dubbo的通信协议 Dubbo 支持的通信协议 Dubbo 框架提供了自定义的高性能 RPC 通信协议&#xff1a; 基于 TCP 的 Dubbo2 协议 基于 HTTP/2 的 Triple 协议 Dubbo 框架是不和任何通信协议绑定的&#xff0c;对通信协议的支持非常灵活&#xff0c;支持任意的第三方协议&#x…...

开源数据库 - mysql - innodb源码阅读 - 线程启动

线程启动源码 /** Start up the InnoDB service threads which are independent of DDL recovery.*/void srv_start_threads() {if (!srv_read_only_mode) {/* Before 8.0, it was master thread that was doing periodicalcheckpoints (every 7s). Since 8.0, it is the log …...

在美团外卖上抢券 Python来实现

在美团外卖上抢券的 Python 实现 在如今的互联网时代&#xff0c;自动化脚本已经成为了许多用户生活中不可或缺的工具。尤其是在购物、抢券等场景中&#xff0c;自动化脚本能够帮助我们节省大量的时间和精力。今天&#xff0c;我们将一起探索如何使用 Python 编写一个简单的脚…...

【ONLYOFFICE 文档 8.2 版本深度测评】功能革新与用户体验的双重飞跃

引言 在数字化办公的浪潮中&#xff0c;ONLYOFFICE 文档以其强大的在线协作功能和全面的办公套件解决方案&#xff0c;赢得了全球用户的青睐。随着 8.2 版本的发布&#xff0c;ONLYOFFICE 再次证明了其在办公软件领域的创新能力和技术实力。 一.协作编辑 PDF&#xff1a;团队合…...

npm入门教程18:npm发布npm包

一、准备工作 注册npm账号&#xff1a; 前往npm官网注册一个账号。注册过程中需要填写个人信息&#xff0c;并完成邮箱验证。 安装Node.js和npm&#xff1a; 确保你的计算机上已安装Node.js和npm。Node.js的安装包中通常包含了npm。你可以通过运行node -v和npm -v命令来检查它…...

VueSSR详解 VueServerRenderer Nutx

SSR Vue中的SSR&#xff08;Server-Side Rendering&#xff0c;服务器端渲染&#xff09;是一种将页面的渲染工作从客户端转移到服务器端的技术。以下是对Vue中SSR的详细解释&#xff1a; 一、SSR的工作原理 在传统的客户端渲染&#xff08;CSR&#xff09;中&#xff0c;页面的…...

构建您自己的 RAG 应用程序:使用 Ollama、Python 和 ChromaDB 在本地设置 LLM 的分步指南

在数据隐私至关重要的时代&#xff0c;建立自己的本地语言模型 &#xff08;LLM&#xff09; 为公司和个人都提供了至关重要的解决方案。本教程旨在指导您完成使用 Ollama、Python 3 和 ChromaDB 创建自定义聊天机器人的过程&#xff0c;所有这些机器人都托管在您的系统本地。以…...

谷歌浏览器安装axure插件

1.在生成静态原型页面的路径下&#xff0c;找到resources\chrome\axure-chrome-extension.crx&#xff0c;这就是需要的插件了。 2.将axure-chrome-extension.crx重命名成axure-chrome-extension.zip然后解压到指定的文件夹&#xff08;这个文件夹不能删除, 例如解压到了扩展程…...

Java唯一键实现方案

数据唯一性 1、生成UUID1.1 代码中实现1.2 数据库中实现优点缺点 2、数据库递增主键优点 3、数据库递增序列3.1 创建序列3.2 使用序列优点缺点 在Java项目开发中&#xff0c;对数据的唯一性要求&#xff0c;业务数据入库的时候保持单表只有一条记录&#xff0c;因此对记录中要求…...

opencv - py_imgproc - py_canny Canny边缘检测

文章目录 Canny 边缘检测目标理论OpenCV 中的 Canny 边缘检测其他资源 Canny 边缘检测 目标 在本章中&#xff0c;我们将学习 Canny 边缘检测的概念用于该目的的 OpenCV 函数&#xff1a;cv.Canny() 理论 Canny 边缘检测是一种流行的边缘检测算法。它由 John F. Canny 于1…...

Spring Boot 创建项目详细介绍

上篇文章简单介绍了 Spring Boot&#xff08;Spring Boot 详细简介&#xff01;&#xff09;&#xff0c;还没看到的读者&#xff0c;建议看看。 下面&#xff0c;介绍一下如何创建一个 Spring Boot 项目&#xff0c;以及自动生成的目录文件作用。 Maven 构建项目 访问 http…...

70B的模型需要多少张A10的卡可以部署成功,如果使用vLLM

部署一个 70B 的模型&#xff08;如 defog/sqlcoder-70b-alpha&#xff09;通常需要考虑多个因素&#xff0c;包括模型的内存需求和你的 GPU 配置。 1. 模型内存需求 大约计算&#xff0c;一个 70B 参数的模型在使用 FP16 精度时大约需要 280 GB 的 GPU 内存。对于 A10 GPU&a…...

clickhouse配置用户角色与权限

首先找到user.xml文件&#xff0c;默认在/etc/clickhouse-server路径下 一、配置角色 找到标签定义 <aaaa><readonly>1</readonly><allow_dll>0</allow_dll> </aaaa>其中aaaa为角色名称&#xff0c;readonly为只读权限&#xff08;0–代表…...

面试题整理 4

总结整理了某公司面试中值得记录的笔试和问到的问题和答案。 目录 PHP传值和传引用区别&#xff1f;什么情况下用传值&#xff1f;什么情况下用传引用&#xff1f; 传值 传引用 区别 选择传值还是传引用时 简述PHP的垃圾回收机制 二维数组排序 什么是CSRF攻击&#xff…...

React基础大全

文章目录 一、React基本介绍1.虚拟DOM优化1.1 原生JS渲染页面1.2 React渲染页面 2.需要提前掌握的JS知识 二、入门1.React基本使用2.创建DOM的两种方式2.1 使用js创建&#xff08;一般不用&#xff09;2.2 使用jsx创建 3.React JSX3.1 JSX常见语法规则3.2 for循环渲染数据 4.模…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...