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

修改el-select或者el-input样式失效

下午改el-input和el-select这两个的样式真的烦,,,还不如写原生标签了。。

样式使用的是sass

我已经在样式器中挨着挨着去找了,把层级的类都写下来了

.select-wraper{//下拉框.el-select{.el-input .el-input__wrapper{background-color: red;}}}

可是一直不生效,最初看到说 popper-append-to-body="false"设置为false,没用。。。

后面感觉就是样式穿透的问题,
注意用在css中穿透是:/v-deep/ 选择器 ,还有看到less貌似是: :v-deep(选择器)也不是,在scss中使用::v-deep(选择器),注意没有空格,然后按照所寻找的样式选择器放进来就可以了。

而且注意不是background-color: none;

::v-deep(.el-input .el-input__wrapper){background-color: none;}

因为在页面的时候我取消样勾选就满意黑色,所以以为设置的是none,结果代码里面设置none是白色,然后一直以为没有生效,当改成自己想要的颜色就可以了

.select-wraper{//下拉框.el-select{::v-deep(.el-input .el-input__wrapper){background-color: red;}}}

结果如下:

在这里插入图片描述

下拉框的样式

虽然输入的颜色自定义了,但是上述的下拉框还是白色的
可以尝试的方案:

1.popper-append-to-body=’false’,但发现还是会去body,
2.样式写style不加scoped还是无效
https://www.cnblogs.com/clownblogs/p/17280284.html

3.自定义类实现新的样式
https://juejin.cn/post/7039883315922354207
但是这个我加了也没有找到类目,添加失败

主要就是.el-popper.is-light类 和.el-select__popper.el-popper类的 background设置无效
最后直接使用关键字effect='dark' 先用着。。。

相关文章:

修改el-select或者el-input样式失效

下午改el-input和el-select这两个的样式真的烦,,,还不如写原生标签了。。 样式使用的是sass 我已经在样式器中挨着挨着去找了,把层级的类都写下来了 .select-wraper{//下拉框.el-select{.el-input .el-input__wrapper{backgrou…...

【Apifox】Apifox设置参数说明:

文章目录 一、效果:二、Query参数:三、返回响应: 一、效果: 二、Query参数: 三、返回响应:...

离线数仓中,为什么用两个flume,一个kafka

实时数仓中,为什么没有零点漂移问题? 因为flink直接取的事件时间用kafka是为了速度快,并且数据不丢,那为什么既用了kafkachannel,也用了kafka,而不只用kafkachannel呢? 因为需要削峰填谷离线数仓…...

p7付费课程笔记6:CMS GC

目录 前言 工作步骤 缺点 问题 前言 上一章节我们讲了串/并行GC,这一章节说下CMS GC。看前思考一个问题,并行GC与CMS GC的区别在哪里。 什么是CMS收集器 CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器。对于…...

Linux性能分析--cpuinfo的内核实现

目录 一、引言 二、Linux性能分析工具介绍 ------>2.1、proc ------------>2.1.1、内核中的proc文件系统 ------------>2.2.2、proc的实现 ------>2.2、cpuinfo ------------>2.2.1、cpuinfo的内核实现 ------------>2.2.2、寄存器获取cpuinfo数据 …...

鲁大师7月新机性能/流畅/久用榜:骁龙8 Gen2领先版亮相,性能跑分再破新高

摘要:iQOO 11S突破上限,红魔8S Pro再创新高 继五月六月,搭载天玑9200的机型相继迎来上市之后,高通也终于按耐不住。 本月所有上市的新机均搭载高通骁龙系列芯片,其中骁龙8 Gen2领先版迎来首次亮相,除了主打…...

【QT学习】01:helloqt

helloqt OVERVIEW helloqt一、helloqt1.使用向导创建2.手动创建3.pro文件4.Qt应用程序框架 二、按钮创建main.cppmywidget.cpp 三、对象模型1.对象树引入2.存在的问题 一、helloqt 创建一个qt项目,可以使用creator的向导创建,也可自己手动创建&#xff…...

学习gRPC (三)

测试gRPC例子 编写proto文件实现服务端代码实现客户端代码 通过gRPC 已经编译并且安装好之后,就可以在源码目录下找到example 文件夹下来试用gRPC 提供的例子。 在这里我使用VS2022来打开仓库目录下example/cpp/helloworld目录 编写proto文件 下面是我改写的exa…...

【html】学习记录

1.在建立一个页面的时候不是打开软件就开始写代码,要先规划好页面的布局框架,不然思想会很混乱,如做个人简历,要分区分块,把每个区域的内容搞清楚。 2.html的很多标签看上去作用都是一样的,但是实际有很大不…...

2023年人工智能技术与智慧城市发展白皮书

人工智能与智慧城市是当前热门的话题和概念,通过将人工智能技术应用在城市管理和服务中,利用自动化、智能化和数据化的方式提高城市运行效率和人民生活质量,最终实现城市发展的智慧化,提升城市居民的幸福感。 AI技术在城市中的应…...

《Python入门到精通》条件控制 if 语句

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:小白零基础《Python入门到精通》 if 语句 1、四种语法格式1.1、if1.2、if else1.3、if elif else1.4、if 嵌套 2、…...

如何编写一个易于维护的考试系统源码

编写一个易于维护的考试系统源码对于开发人员来说非常重要。一个易于维护的系统可以使代码更易于理解、修改和扩展,从而提高开发效率和系统稳定性。 第一步:良好的项目结构 良好的项目结构是一个易于维护的源码的基础。可以按照模块、功能或层次等方式…...

day 2 |977.有序数组的平方、209.长度最小的子数组、59.螺旋矩阵II

目录: 解题及思路学习 977.有序数组的平方 https://leetcode.cn/problems/squares-of-a-sorted-array/submissions/ 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1&a…...

【力扣每日一题】2023.8.2 翻转卡片游戏

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 这道题不是什么翻转卡片游戏,这就是纯纯的文字游戏,要是能看懂题目那就是非常简单,接下来我就给大家分…...

IDEA设置中文 中文插件

IDEA设置中文 中文插件 首先进入idea File --> Setting --> Plugin 输入Chinese 搜索插件 选择下图插件进行install 安装完成后,重启idea即可...

Python——调用webdriver.Chrome() 报错

今天运行脚本&#xff0c;报错内容如下&#xff1a; collecting ... login_case.py:None (login_case.py) login_case.py:11: in <module> dr webdriver.Chrome() D:\Program Files (x86)\Python\Python39\Lib\site-packages\selenium\webdriver\chrome\webdriver.p…...

人工智能发展的五个主要技术方向是什么?

人工智能主要分支介绍 通讯、感知与行动是现代人工智能的三个关键能力&#xff0c;在这里我们将根据这些能力/应用对这三个技术领域进行介绍&#xff1a; 计算机视觉(CV) 自然语言处理(NLP) 在 NLP 领域中&#xff0c;将覆盖文本挖掘/分类、机器翻译和语音识别。 机器人 1、…...

机器学习知识经验分享之六:决策树

python语言用于深度学习较为广泛&#xff0c;R语言用于机器学习领域中的数据预测和数据处理算法较多&#xff0c;后续将更多分享机器学习数据预测相关知识的分享&#xff0c;有需要的朋友可持续关注&#xff0c;有疑问可以关注后私信留言。 目录 一、R语言介绍 二、R语言安装…...

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SO-CNN-GRU蛇群算法优化卷积门控循…...

309. 买卖股票的最佳时机含冷冻期

给定一个整数数组prices&#xff0c;其中第 prices[i] 表示第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;: 卖出股票后&#xff0c;你无法在第二天买入股票 …...

告别外部中断!用EnableInterrupt库轻松搞定Arduino Nano多通道PWM读取(附完整代码)

Arduino Nano多通道PWM读取实战&#xff1a;用EnableInterrupt突破硬件限制当你用Arduino Nano开发四轴飞行器或机器人项目时&#xff0c;是否遇到过这样的尴尬&#xff1a;遥控器的四个通道PWM信号需要同时读取&#xff0c;但Nano只有两个外部中断引脚&#xff1f;这个问题困扰…...

Web渗透测试能力成长地图:从工具使用到漏洞认知跃迁

1. 这不是工具清单&#xff0c;而是一张Web渗透测试的“能力成长地图”你刚点开这篇文章&#xff0c;大概率正站在两个路口之间&#xff1a;一边是网上铺天盖地的“十大免费扫描器推荐”&#xff0c;点进去全是截图下载链接一句“一键扫漏洞”&#xff0c;结果装完跑两下&#…...

179个核心职位,50个公司分类,中国大模型产业全栈

最后 对于正在迷茫择业、想转行提升&#xff0c;或是刚入门的程序员、编程小白来说&#xff0c;有一个问题几乎人人都在问&#xff1a;未来10年&#xff0c;什么领域的职业发展潜力最大&#xff1f; 答案只有一个&#xff1a;人工智能&#xff08;尤其是大模型方向&#xff09;…...

3分钟快速安装BetterNCM插件管理器,让你的网易云音乐功能翻倍

3分钟快速安装BetterNCM插件管理器&#xff0c;让你的网易云音乐功能翻倍 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在为网易云音乐功能单一而烦恼吗&#xff1f;想要解锁更多个…...

微信小程序项目实战:从npm安装Vant Weapp到解决样式冲突的完整避坑指南

微信小程序工程化实战&#xff1a;Vant Weapp集成与样式冲突解决方案全解析 第一次在小程序里引入Vant Weapp时&#xff0c;我对着满屏错位的组件样式发呆了半小时——原本优雅的按钮变成了扭曲的色块&#xff0c;表单元素叠在一起像抽象画。这不是个例&#xff0c;根据社区反…...

Unity中实现深度遮挡:LingBot-Depth实战接入与优化

1. 这不是“加个插件就完事”的AR效果——为什么LingBot-Depth在Unity里值得专门写一篇实战教程你肯定见过那种AR应用&#xff1a;虚拟椅子摆在真实地板上&#xff0c;但当你绕到椅子后面&#xff0c;它依然完整显示&#xff0c;完全无视身后那堵真实的墙&#xff1b;或者一只3…...

C语言预处理指令全解析

第六章 预处理命令在c语言中&#xff0c;所有# 开头的指令&#xff0c;被称为预处理指令。gcc 编译预处理 所有的预处理指令&#xff0c;都要在这步处理完汇编编译连接#include包含头文件。 全局变量的声明&#xff0c;函数的声明&#xff0c; 自定义构造类型声明&#xff0c; …...

3步免费解锁Cursor Pro:告别设备限制,永久享受AI编程助手高级功能

3步免费解锁Cursor Pro&#xff1a;告别设备限制&#xff0c;永久享受AI编程助手高级功能 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: …...

Python之encode-cli包语法、参数和实际应用案例

Python encode-cli包完整使用指南 encode-cli 是Python生态中轻量、高效的命令行编码/解码工具包&#xff0c;专注于提供主流编码格式的快速转换&#xff0c;支持命令行直接调用&#xff0c;无需编写复杂Python代码&#xff0c;适用于数据加密、文本转码、URL处理、Base64转换等…...

ZYNQ PS-SPI驱动W25Q80 Flash避坑指南:从寄存器配置到逻辑分析仪抓包全流程

ZYNQ PS-SPI驱动W25Q80 Flash实战避坑手册&#xff1a;从寄存器配置到信号抓包全解析 当你在Vitis Standalone环境下调试ZYNQ的PS-SPI与W25Q80 Flash通信时&#xff0c;是否遇到过这些场景&#xff1a;SPI时钟信号看似正常但数据始终对不上、擦除操作耗时远超预期、FIFO缓冲区莫…...