前端 /deep/ 深入样式(很深入的那种哦) 简单收藏
简单介绍:使用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/ 深入样式(很深入的那种哦) 简单收藏的更多相关文章
- 前端04 /css样式
前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...
- 解密国内BAT等大厂前端技术体系-美团点评之下篇(长文建议收藏)
引言 在上篇中,我已经介绍了美团点评的业务情况.大前端的技术体系,其中大前端的技术全景图如下: 上篇重点介绍了工程化和代码质量的部分,工程化涵盖了客户端持续集成平台-MCI.全端监控平台-CAT.移动 ...
- Bootstrap 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单.
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- HTML前端入门归纳——样式
本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...
- 如何面试前端工程师:GitHub 很重要
编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...
- 看看如何面试前端工程师:Github很重要
从程序员的角度提出要去学习哪些知识,下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题.不过我想先给你们一个忠告,招聘是一件非常艰巨的任务,在45分钟内指出一名侯选人是否合适是你需要完成的任务 ...
- 前端之css样式(选择器)。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
随机推荐
- Ajax 下载文件 文件被损坏
问题表现 Ajax 下载文件成功后,打开提示格式损坏,源代码如下: axios({ method: 'get', url: "/public/工作簿1.xlsx", // 静态资源 ...
- Python实用笔记 (17)模块
一个abc.py的文件就是一个名字叫abc的模块,一个xyz.py的文件就是一个名字叫xyz的模块. 现在,假设我们的abc和xyz这两个模块名字与其他模块冲突了,于是我们可以通过包来组织模块,避免冲 ...
- GraphicsLab Project 之 Screen Space Planar Reflection
作者:i_dovelemon 日期:2020-06-23 主题:Screen Space Planar Reflection, Compute Shader 引言 前段时间,同事发来一篇讲述特化版本的 ...
- HDU 2157 How many ways?【矩阵快速幂】
题目 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, 葱头决定, 每次上课都走不同的路线 ...
- 让MySQL为我们记录执行流程
让MySQL为我们记录执行流程 我们可以开启profiling,让MySQL为我们记录SQL语句的执行流程 查看profiling参数 shell > select @@profilin ...
- 最新Spark入门篇
一.Spark简介 1.什么是Spark Apache Spark是一种快速的集群计算技术,基于Hadoop MapReduce技术,扩展了MapReduce模型,主要特性是在内存中集群计算,速度更快 ...
- shell专题(一):Shell概述
大数据程序员为什么要学习Shell呢? 1)需要看懂运维人员编写的Shell程序. 2)偶尔会编写一些简单Shell程序来管理集群.提高开发效
- python数据处理(六)之数据清洗:标准化和脚本化
1.数据归一化和标准化 a. 归一化:对数据集进行计算,使数据都位于一个特定的范围\ b.标准化: c.删除离群值 2.数据存储 a.保存到SQLite数据库中 b.导出到简单的文件中csv 3.找到 ...
- drf源码剖析系列(系列目录)
drf源码剖析系列(系列目录) 01 drf源码剖析之restful规范 02 drf源码剖析之快速了解drf 03 drf源码剖析之视图 04 drf源码剖析之版本 05 drf源码剖析之认证 06 ...
- 数据可视化之 图表篇(二)如何用Power BI制作疫情地图?
丁香园制作的这个地图可视化,相信大家每天都会看好几遍,这里不讨论具体数据,仅来探讨一下PowerBI地图技术. 这个地图很简洁,主要有三个特征: 1,使用着色地图,根据数据自动配色 2,只显示中国地图 ...