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

vue项目写的样式应用不到元素上?elementUI等框架的坑

vue项目写的样式应用不到元素上?

  • scoped原理
  • 接着坑就来了
  • 解决方法
    • 1、修改父元素的样式
    • 2、深度作用选择器

使用vue+elementUI写个项目时发现写的样式应用不到元素上,任凭!important也毫无作用!看看你是否也踩了这个坑吧!

scoped原理

我们都知道style标签添加scoped属性时,里面写的样式代码只会作用到当前的模板(template)上,这样的好处是可以避免全局污染。
原理是scoped属性会让当前模板上的标签添加自定义的属性并且style中的样式都会添加属性选择器对当前元素的获取。
在这里插入图片描述
实际页面中:
在这里插入图片描述
如此一来就能实现scoped中的样式之前当前模板中生效了,因为各个组件中的属性值都是不同的。

接着坑就来了

当我引入elementUI时,我需要自定义样式覆盖ui框架的样式时出现了样式无法应用上去的问题。打开控制台,找到想要覆盖的元素的class值,添加css进行覆盖。
在这里插入图片描述
但是此时并不能如我所愿,这是因为ui框架的组件内部是没有添加到自定义属性的,外层组件才有,而我们的css又全都会添加属性选择器,这样自然就获取不到元素了,写不了样式。

解决方法

针对这个问题,vue也提供了解决方法。

1、修改父元素的样式

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

2、深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用/deep/操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。

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

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

SCI/SSCI

1. [Information Processing and Management](http://www.letpub.com.cn/index.php?pagejournalapp&viewdetail&journalid3564) (一区)...

倾情分享一个yolo3训练识别旗帜的例子

下列链接是一个yolo3识别旗子的例子 https://github.com/ZzzzzZXxxX/yolo3_keras_Flag_Detection 但是下载之后发现训练之后的模型并不好用&#xff0c;什么旗子都识别不了&#xff0c;于是换另外yolo发布版本训练这个Flag的数据 经过反复折腾终于成功。 链接&#xff1a;htt…...

Ensemble Learning

Ensemble Learning 1 高级集成技术 1.0 决策树 元素&#xff1a; 根结点&#xff1a;包含样本的全集内部节点&#xff1a;对应特征属性测试叶节点&#xff1a;代表决策结果 决策树构建一个二叉树来分割数据&#xff0c;预测时&#xff0c;在树的内部节点处用某一属性值进行判…...

vue——父子组件的数据传递

父子组件的数据传递 1、 父>子&#xff08;通过属性的形式&#xff09;&#xff1a; &#xff08;1&#xff09;在子组件的标签里设置属性【如 :count“0” 】。给属性前面加上冒号&#xff0c;参数‘0’会变成数字格式&#xff08;变为一个js表达式&#xff09;&#xff…...

真·杂项:资本论阅读笔记(随缘更新)

Chap1 商品与货币 商品的两个属性&#xff1a;使用价值和价值 商品是使用价值和价值的综合体。 使用价值&#xff1a;物品对人有用&#xff0c;价值分为质&#xff08;属性&#xff09;和量&#xff08;多少&#xff09; 交换价值&#xff1a;一种使用价值和另一种使用价值…...

HMS Core助力同程旅行,打造更贴心的用户出行体验

作为中国在线旅行行业的创新者&#xff0c;同程旅行聚焦年轻、时尚、个性的消费群体&#xff0c;致力于为用户提供更便捷、聪明、安全的出行服务。近年来&#xff0c;同程旅行通过人工智能等创新科技的应用将平台原本的交易撮合角色转变为“管家”和“助手”的角色&#xff0c;…...

C++STL算法 mismatch 中string.c_str()无法直接放到容器中

vs下的输出结果如下 .天地玄黄 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 闰余成岁 8 0 8 8 8 8 8 8 天地玄黄 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律吕调阳 8 0 8 8 8 8 8 8 闰余成岁 7 律吕调阳 7 #include<iostream> #include<cstdlib> #includ…...

vue简单基础

引入vue 新建vue对象 绑定作用范围 {{}} 取值 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http…...

1688API、获得商品快递费用

本帖只展示部分代码及接口 需了解更多或开发系统请移步注册测试 http://console.open.onebound.cn/console/?iRookie 测试请求地址: http://open.onebound.cn/test/? { “item”: { “num_iid”: “591734471276”, “location”: null, “area_id”: “2274”, “shipping_…...

搜索: DFS + 剪枝:木棒

题目链接&#xff1a;https://www.acwing.com/problem/content/169/ 题目&#xff1a; 乔治拿来一组等长的木棒&#xff0c;将它们随机地砍断&#xff0c;使得每一节木棍的长度都不超过 50 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态&#xff0c;但忘记了初始时有…...

160. 相交链表

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&#…...

Prometheus rate和irate查询实现

rate 该函数用来计算某个指标在最近一个区间时间内的变化率。 比如说&#xff0c;Prometheus每15秒采集一次数据&#xff0c;当某个指标metric1的数据采集如下&#xff1a; timestampvalue15:00:001000015:00:151003015:00:301004515:00:4510090 假设当前时间为15:00:50&…...

OpenGl 基本函数 glDrawArrays 详解

本文章是转载&#xff1a;下面的几张图一目了然&#xff0c;很不多。 https://www.cnblogs.com/lxb0478/p/6381677.html glDrawArrays的功能&#xff1a;提供绘制功能&#xff0c;从数组数据中提取数据渲染基本图元。 定义 void glDrawArrays( GLenum mode, GLint first…...

【AI视野·今日CV 计算机视觉论文速览 第220期】Wed, 16 Jun 2021

AI视野今日CS.CV 计算机视觉论文速览 Wed, 16 Jun 2021 Totally 76 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Is this Harmful? Learning to Predict Harmfulness Ratings from Video Authors Johan Edstedt, Johan Karlsson, Franci…...

Linux线程总结

Linux 线程总结简述常用的线程相关API函数原型(3、4、5)线程创建、等待、退出API使用创建线程、等待线程线程退出、传参线程间共享数据(全局变量)互斥锁相关API使用简述互斥锁的作用互斥锁与全局变量配合使用死锁条件变量相关API的使用简述条件变量的使用条件变量的使用测试---…...

【RTT】SPI Flash 与文件系统(2):FAL

参考文档&#xff08;国内&#xff09;&#xff1a;FAL 参考文档 一、概述 FAL (Flash Abstraction Layer) &#xff0c;即 Flash 抽象层&#xff0c;是对 Flash 及基于 Flash 的分区进行管理、操作的抽象层&#xff0c;对上层统一了 Flash 及 分区操作的 API。 对于 FAL 的依赖…...

数据库索引高频面试题:java类的继承关系

前言 今天我们来说说Redis为什么高性能&#xff1f;如何做高可用&#xff1f; Redis为什么这么快&#xff1f; Redis是单线程的&#xff0c;避免了多线程的上下文切换和并发控制开销&#xff1b;Redis大部分操作时基于内存&#xff0c;读写数据不需要磁盘I/O&#xff0c;所以速…...

数据库事物隔离级别

数据库事务的隔离级别有4种&#xff0c;由低到高分别为Read uncommitted 、Read committed 、Repeatable read 、Serializable 。而且&#xff0c;在事务的并发操作中可能会出现脏读&#xff0c;不可重复读&#xff0c;幻读。下面通过事例一一阐述它们的概念与联系。 Read unc…...

推荐学习!超全Android中高级面试复习大纲,大厂面经合集

前言 这些题目是网友去美团等一线互联网公司面试被问到的题目。笔者从自身面试经历、各大网络社交技术平台搜集整理而成&#xff0c;熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。 主要分为以下几部分&#xff1a; &#xff08;1&#xff09;Android面试题 …...

用户增长——Cohort Analysis 留存分析(三)

转载于:Cohort Analysis&#xff1a;用户在哪一步离开了我们的产品&#xff1f; 数据是会骗人的&#xff0c;尤其是平均数据&#xff08;真实世界会有用户每个月下单2.5次吗&#xff1f;很可能是两个分别下单1次和4次的客户而已&#xff09;&#xff0c;一个中等的平均的用户画…...

箭头函数以及箭头函数的this关键字

//箭头函数是用来简化函数定义语法的const fn () > {console.log(123)}fn();// 在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略function sum (n1, n2){return n1 n2;}const sum (n1, n2) > n1 n2; // 在箭头函数中…...

Java小白入门200例23之阶乘计算

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…...

2-6.JAVA三大框架

Spring MVC 1、用户发送请求至前端控制器DispatcherServlet。 2、DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找)&#xff0c;生成处理器对象及处理器拦截器(如果有则生成)一并返回给DispatcherS…...

Centos操作操作系统下安装mariadb数据库管理系统

1.查看是否安装mariadb rpm -qa|grep maridb 这种情况表示已安装,直接执行第三步&#xff0c;反之若没有任何东西&#xff0c;则执行第二步 2.安装mariadb yum install mariadb-server yum install mariadb yum install mariadb-devel 3.启动mariadb service mariadb start 4.…...

.detach().cpu().numpy()该段代码的作用

detach(): 返回一个新的Tensor&#xff0c;但返回的结果是没有梯度的。 cpu():把gpu上的数据转到cpu上。 numpy():将tensor格式转为numpy。 如图所示&#xff1a; out logits.detach().cpu().numpy()...

VISSIM二次开发(Python)大作业总结2

VISSIM二次开发&#xff08;Python&#xff09;&大作业总结2 写在前面 前一小节已经概括了基本所有这次使用的二次开发的知识&#xff0c;在这一小节&#xff0c;我们主要介绍本文对.att文件的读取和绘图以及分析的工作。 在这一部分我们将展开对这一部分的介绍&#xf…...

Python学习日记3

今天换了一个视频资源学习&#xff0c;因为发现之前的教学视频讲的是python2&#xff0c;python2跟现在的python3差别很大&#xff0c;所有换了一个平台学习。 今天学习内容主要是把python重新从头看了一遍&#xff0c;重新学习了一下&#xff0c;补充了关系运算符的知识&…...

Android FileProvider 应用间共享媒体资源

先参考以下两个文档&#xff1a; 官网介绍&#xff1a;https://developer.android.google.cn/training/data-storage/use-cases TX 介绍&#xff1a;https://developers.weixin.qq.com/community/develop/doc/0004886026c1a8402d2a040ee5b401 然后基于以上的文档做一个例子介…...

express框架rmvp的使用

文章目录前言一、RMVP是什么&#xff1f;二、搭建基本服务1.构建服务器server.js基本组成2.router文件2.1、如何实现数据的获取GETPOSTPUTPATCHDELETE2.2 如果想要不区分请求方式,一律接收2.3 做rmvp的抽离,抽离controller三、渲染知识补充前端请求静态资源目录&#xff08;快&…...

【Android 11】使用Android Studio调试系统应用五):编译Settings 模块、解决编译错误

文章目录 1. 篇头语2. 系列文章3. 关联Git4. 完善Settings的依赖4. 1 Android.bp回顾4.2 提取出所需androndx支持库4.2.1 依赖列表(android.bp)4.2.2 转换后的列表(build.gradle)4.2 提取出所需aar库4.3 提取出依赖的本地jar包4.3.1 查找本地jar包的位置4.3.2 所需jar列表(ando…...

数字化转型升级闯关的原力:让PC回归商务本质

有这样一些企业&#xff0c;他们由业务驱动在数字化转型过程中打怪升级&#xff0c;一路闯关。他们的生产应用场景和挑战各不相同&#xff0c;但是这些企业的决策者都选择了首先更新计算流程、改进计算策略&#xff0c;塑造出了一支速度更快、安全度更高、效率也更高的员工队伍…...

打破企业存储瓶颈,新一代英特尔®傲腾™的创新与超越

申耀的科技观察读懂科技&#xff0c;赢取未来&#xff01;作为第一个大规模商用的、最有希望接续NAND的下一代存储介质&#xff0c;最近这两三年Intel在傲腾上的投入不可谓不大。Intel甚至在2020年10月宣布出售NAND业务产品线。Intel如此有把握和决心&#xff0c;让我不得不感觉…...

arnold草类细密物体渲染,闪烁问题解决方法

最近学习mass做草渲染小结。 1、使用的是mass 中穿件intancer的方式创建群体草效果。并用曲线设置道路过渡缩放效果。 2、渲染草和细密模型&#xff0c;经常会在小分辨率出现闪烁&#xff0c;此时就要启用自适应adaptive sampling 和更高的aa值&#xff0c;arnold作为无偏差光…...

[NOIP2001 普及组] 最大公约数和最小公倍数问题

#include <iostream> #include <cstdio> #include <cmath> using namespace std; long long int yueshu(int x,int y){ if(x%y0){ return y; }else{ return yueshu(y,x%y); } } int main(){ int x,y; cin>>...

2012-07-13 19:40 IT人士遭遇早衰危机 对象难找老婆难陪

IT 行业&#xff0c;说起来就让很多人心动。为啥&#xff1f;专出富豪呗。2012年胡润少壮派富豪榜中&#xff0c;IT 行业可是最“丰产”的行业。 做 IT 的人却叫苦连连&#xff1a;“这个叫隔行如隔山……事实上我们并没有外界想的那样光鲜&#xff0c;你们上班的时候我们上班&…...

IT人士遭遇早衰危机 对象难找老婆难陪

IT行业&#xff0c;说起来就让很多人心动。为啥&#xff1f;专出富豪呗。2012年胡润少壮派富豪榜中&#xff0c;IT行业可是最“丰产”的行业。 做IT的人却叫苦连连&#xff1a;“这个叫隔行如隔山……事实上我们并没有外界想的那样光鲜&#xff0c;你们上班的时候我们上班&…...

对不起,互联网人是没有假期的!

燃财经&#xff08;ID:rancaijing&#xff09;原创作者 | 唐亚华 赵磊 黎明孔明明 闫丽娇 苏琦 周晶晶编辑 | 魏佳“不出门后悔&#xff0c;出门更加后悔&#xff0c;”这是大多数人假期的状态。在你纠结于国庆假期要不要出去玩的时候&#xff0c;有这样一批互联网人&#xff0…...

IT 人之囧境 - 单身的找不到对象,有老婆的没空陪

IT行业&#xff0c;说起来就让很多人心动。为啥&#xff1f;专出富豪呗。2012年胡润少壮派富豪榜中&#xff0c;IT行业可是最“丰产”的行业…… 做IT的人却叫苦连连&#xff1a;“这个叫隔行如隔山……事实上我们并没有外界想的那样光鲜&#xff0c;你们上班的时候我们上班&am…...

3. 递归

3.1 递归 假设你在祖母的阁楼中翻箱倒柜&#xff0c;发现了一个上锁的神秘手提箱。 祖母告诉你&#xff0c;钥匙很可能在下面这个盒子里。 这个盒子里有盒子&#xff0c;而盒子里的盒子又有盒子。钥匙就在某个盒子中。 为找到钥匙&#xff0c;你将使用什么算法? 第一种&…...

微信直播

微信直播是怎么实现的&#xff1f; 微信直播是怎么实现的&#xff1f; 1.微信直播是基于云数据流媒体的传输、编辑、分发平台&#xff0c;创建直播频道后将直播地址嵌入到对应的微信公众号&#xff0c;即可发起微信直播。 2.接入直播系统后&#xff0c;任何人可以通过微信好…...

微信直播冷场怎么办?教你提高直播活跃

微信直播上线的时间不长也不短&#xff0c;相信不少之前跃跃欲试的朋友也已经开通微信直播了。不过很多人在刚刚直播时总会遇到人气少&#xff0c;、经常出现冷场的情况。本文就为大家分享一下微信直播时提高活跃度的小技巧。 首先&#xff0c;微信直播的主播应该要学会实时互…...

微信直播可以直播什么内容

不久前&#xff0c;视频号上线了直播功能&#xff0c;微信开始进军短视频和直播。 之前&#xff0c;在微信做直播只能通过小程序或公众号&#xff0c;而现在开启直播更方便的方式就是通过视频号。视频号直播&#xff0c;准确点来说是微信直播&#xff0c;能够让主播快速开播&am…...

bat学习(七)给图片文件前边批量加上序号

给图片文件前边加上序号 在bat文件中输入以下代码 /*&cls echo off rem 在多个子文件夹里的jpg图片文件的名称前面/开头添加递增数字序号/编号前缀 mode con lines3000 set #Any question&set WX&set $Q&set/az0x53b7e0b4 title %#% %$%%$%/%% %z% cd /d &qu…...

使用thymeleaf 给List 加个序号

在处理业务数据时&#xff0c;通常有表头&#xff08;主表&#xff09;&#xff0c;表身&#xff08;从表&#xff09;&#xff0c;当我们在前端需要显示表身时不能使用ID当做序号&#xff08;很有可能排序不同而错乱&#xff09;&#xff0c;那么处理办法&#xff0c;1.通过Ja…...

word图片批量添加题注(序号)的方法

1.选中一张图片&#xff0c;右键选中“添加题注” 2.设定好题注格式 3.复制生成的题注。 4.CTRLH&#xff0c;在替换框中的查找内容输入&#xff1a;^g&#xff0c;替换为输入&#xff1a;^&^p^c&#xff0c;然后全部替换。 5.此时所以图片均添加了题注&#xff0c;注意刚才…...

latex中给段落、图片、公式加序号

基础&#xff1a;不许要引用额外的包&#xff0c;可以直接使用&#xff0c;举例&#xff1a; \begin{figure}[h] \centering \includegraphics[width\linewidth]{img/system} %这里面写明图片位置&#xff0c;有些不需要区分图片格式&#xff08;img/system表示在同一个目录下…...

Markdown文件中图片自动转云图片和自动生成标题序号

软件: Typora 0.10.11(beta) 系统: win10 1. 自动转云 Markdown文件如果带图片, 想要发给别人看是一件麻烦的事情, 所以这里利用Typora软件自带的图片上传功能, 实现插入图片自动上传到云上, 在朋友之间发送Markdown文件的时候, 就可以带着图片发送了 2. 自动生成标题序号 在…...

word怎么设置图片编号(图片下标,图片标签,图片序号,图片注释,题注)(交叉引用)

参考文章1&#xff1a;word怎么设置图片自动编号 参考文章2&#xff1a;WORD教学五&#xff08;论文排版之论文中的图表跟随章节插入题注&#xff09; 参考文章3&#xff1a;题注或页码中不含章节号请使用“开始”选项卡下的“多级列表”按钮然后选择一种连接到标题样式的编号…...

LabelImg 批量生成标注图片文件夹序号(起始值+终值)

# -*- coding: utf-8 -*- """ File : test.py Time : 2020/7/7 9:58 Author : Dontla Email : sxanaqq.com Software: PyCharm """ # 图片起始序号 start 11001 # 图片间隔 interval 500 for i in range(8):print({}-{}.format(start…...

关于多行文字和序号或者图片对齐的问题

在写页面的过程中经常遇见这样的样式 &#xff08;1&#xff09;多行文字和序号顶部对齐实现的办法有很多种&#xff0c;比如序号和文字在两个标签内直接设置一个顶部对齐的属性vertial-align:top;即可对齐&#xff0c;这种虽然易实现&#xff0c;但是会对写一个标签实现的方法…...