简单介绍:使用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. Ajax 下载文件 文件被损坏

    问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源 ...

  2. Python实用笔记 (17)模块

    一个abc.py的文件就是一个名字叫abc的模块,一个xyz.py的文件就是一个名字叫xyz的模块. 现在,假设我们的abc和xyz这两个模块名字与其他模块冲突了,于是我们可以通过包来组织模块,避免冲 ...

  3. GraphicsLab Project 之 Screen Space Planar Reflection

    作者:i_dovelemon 日期:2020-06-23 主题:Screen Space Planar Reflection, Compute Shader 引言 前段时间,同事发来一篇讲述特化版本的 ...

  4. HDU 2157 How many ways?【矩阵快速幂】

    题目 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, 葱头决定, 每次上课都走不同的路线 ...

  5. 让MySQL为我们记录执行流程

    让MySQL为我们记录执行流程   我们可以开启profiling,让MySQL为我们记录SQL语句的执行流程   查看profiling参数 shell > select @@profilin ...

  6. 最新Spark入门篇

    一.Spark简介 1.什么是Spark Apache Spark是一种快速的集群计算技术,基于Hadoop MapReduce技术,扩展了MapReduce模型,主要特性是在内存中集群计算,速度更快 ...

  7. shell专题(一):Shell概述

    大数据程序员为什么要学习Shell呢? 1)需要看懂运维人员编写的Shell程序. 2)偶尔会编写一些简单Shell程序来管理集群.提高开发效

  8. python数据处理(六)之数据清洗:标准化和脚本化

    1.数据归一化和标准化 a. 归一化:对数据集进行计算,使数据都位于一个特定的范围\ b.标准化: c.删除离群值 2.数据存储 a.保存到SQLite数据库中 b.导出到简单的文件中csv 3.找到 ...

  9. drf源码剖析系列(系列目录)

    drf源码剖析系列(系列目录) 01 drf源码剖析之restful规范 02 drf源码剖析之快速了解drf 03 drf源码剖析之视图 04 drf源码剖析之版本 05 drf源码剖析之认证 06 ...

  10. 数据可视化之 图表篇(二)如何用Power BI制作疫情地图?

    丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...