简单介绍:使用vue脚手架和elemen-ui开发的前端项目  遇到这样的场景: 对div下的el-select下拉组件 设置样式,直接在标签上用style属性是完全可以的,但我们的开发规范是前端样式必须扔到<style>中,因此会遇到 使用el-select按钮组件的时候 页面被渲染出来会有好几层 ,怎么正好把样式加到对应那个下拉那个input元素上呢?

<div class="table-structure-select">
<el-select v-model="dataSelect" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>

el-select组件被渲染后的html  会多出来几层  如下:

所以我们如果要对select设置样式 必须要深入到 class="el-input el-input--suffix" 甚至是 class="el-input__inner" 中

.table-structure-select /deep/ .el-select .el-input {
width: 435px;
}

如此才能设置上需要的样式  其实可以只写最外层的父元素class 然后 /deep/  需要调整的内层元素class就行 即.table-structure-select /deep/ .el-input {   }中间的.el-select可以不写

总结:前端基础虽然差,但是不要怕,一点一滴积累即可

前端 /deep/ 深入样式(很深入的那种哦) 简单收藏的更多相关文章

  1. 前端04 /css样式

    前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...

  2. 解密国内BAT等大厂前端技术体系-美团点评之下篇(长文建议收藏)

    引言 在上篇中,我已经介绍了美团点评的业务情况.大前端的技术体系,其中大前端的技术全景图如下: 上篇重点介绍了工程化和代码质量的部分,工程化涵盖了客户端持续集成平台-MCI.全端监控平台-CAT.移动 ...

  3. Bootstrap 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。

    Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.

  4. 【jQuery基础学习】09 jQuery与前端(这章很水)

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  5. HTML前端入门归纳——样式

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  6. 如何面试前端工程师:GitHub 很重要

    编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...

  7. 看看如何面试前端工程师:Github很重要

    从程序员的角度提出要去学习哪些知识,下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题.不过我想先给你们一个忠告,招聘是一件非常艰巨的任务,在45分钟内指出一名侯选人是否合适是你需要完成的任务 ...

  8. 前端之css样式(选择器)。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  9. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

随机推荐

  1. 如果人生也能存档——C#中的备忘录模式

    大家好,老胡又和大家见面了.首先承认今天的博客有点标题党了,人生是没有存档,也没有后悔药的.有存档和后悔药的,那是游戏,不知道这是不是游戏让人格外放松的原因之一. 今天恰逢端午放假,就让我们来试着做一 ...

  2. BOM问题-对于php的影响

    甲.BOM说明 BOM(Byte Order Mark),是UTF编码方案里用于标识编码的标准标记.这个标记是可选的,UTF-8不需要BOM来表明字节顺序,但可以用BOM来表明当前编码方式.但如果文件 ...

  3. [区间+线性dp]数字游戏

    题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共\(n\)个),你要按顺 ...

  4. 优雅关闭服务下线(Jetty)

    在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...

  5. node:semantic version instruction

    [major].[minor].[patch] MAJOR version when you make incompatible API changes, MINOR version when you ...

  6. Java_面试札记

    Java_面试札记  为了不死,我愿献出生命 背景:记录下寄几和friend在2020年Java面试中遇到的problem. 1.MySQL索引结构? 基本上所有的索引都是B-Tree结构,还有一部分 ...

  7. Git篇----创建远程仓库

    现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...

  8. day77 vue对象提供的属性功能

    目录 一.过滤器 二.计算属性(computed) 三.侦听属性(watch) 四.vue对象的生命周期 五.阻止事件冒泡和刷新页面 六.综合案例-todolist 一.过滤器 定义:就是vue允许开 ...

  9. 怎么查看HBase表的创建时间

    前几天HBase出现了RIT告警,忽然发现发出告警的Region所属的表并不是我创建出来的,于是就想看看这些表是怎么来的. 一时也没什么头绪,就先看看这些表是什么时候创建出来的吧,然后再根据时间点看看 ...

  10. 题解:2018级算法第五次上机 C5-图2

    题目描述: 样例: 实现解释: 所有结点对最短路径的板子题 知识点: 寻找所有结点对最短路径,动态规划 坑点: 无坑,注意建边即可 使用的算法为floyd算法 按照程序顺序解释如下: 首先建图,以邻接 ...