-
2022-01-21 09:51:34
1.>>>(如果项目使用的是
css 原生样式,那么你可以直接使用>>>穿透修改)<style scoped>
/*编译前*/ .a >>> .b { /* ... */ }
/*编译后*/ .a[data-v-f3f3eg9] .b { /* ... */ }
</style>
2.vue2中使用修改element-ui vant组件
@deep: ~">>>";
@{deep} .el-input__inner {
padding: 4px 65px;
}
注意:不能嵌套 如:
.el-input{
@{deep} .el-input_inner{ -------------(不能这样嵌套使用)
}
}
3、::v-deep
如果使用了预处理器都可以使用
::v-deep<style lang="scss" scoped>
/*用法1*/ .a{ ::v-deep .b { /* ... */ } }
/*用法2*/ .a ::v-deep .b { /* ... */ }
</style>
更多相关内容 -
css层级
2022-05-06 11:49:26css样式中的部分层级属性及属性值的特点展开全文一，在页面中，若导航栏下拉框无法正常盖住下面的文本时，可以采用z-index属性，z-index的属性值越高说明级别越高，最高为999.
注：1，如果定位的元素层级一样，下边框的元素会盖住上边元素（切记在开启定位下使用z-index属性）
2，在定位的情况下：
通过z-index属性元素的层级
属性值：是一个正整数；
层级越高，优先级也就越高
二，透明效果属性：
方法一：opacity： ；属性值在0-1之间 用来设置元素的透明等级，属性值0（完全透明） ，1（不透明）之间的数值 方法二：rgba（_,_,_,._）最后一个格子是填写数值0-1，与上面是两种写法。 方法三：background-color:transparent;（属性值是全透明）效果上面三者之间的特点如下：
1，opacity，rgba, transparent 都可以做透明效果使用
2，opacity 属性是对这个元素起作用
3，rgba, transparent 是属性值
4，rgba, transparent对属性起作用（主用于边框，背景，字体等）
-
css层级关系怎么设置
2021-08-05 03:18:34在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。本教程操作环境：windows7系统、...展开全文在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中，可以利用z-index属性来设置层级。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(Z-index 仅能在定位元素上奏效)。
做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
简单演示
两个DIV，第二个向上移动50px，正常情况应该是这样的
第二个div遮住了第一个div，对第二个添加z-index属性
结果就会变成这个样子，z-index 最简单的应用就是这样
只对定位元素有效
z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象)，用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
虽然第一个p的z-index比第二个p大，但是由于第一个p未定位，其z-index属性未起作用，所以仍然会被第二个p覆盖。
相同z-index谁上谁下
相同的z-index其实有两种情况
1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
2.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
父子关系处理
如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
虽然子元素设置z-index比父元素小，但是子元素仍然出现在父元素上方
如果父元素z-index失效(未定位或者使用默认值)，那么定位子元素的z-index设置生效
子元素z-index=-5生效，被父元素覆盖
兄弟之间子元素
如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定
虽然第一个div的子元素的z-index比较高，但是由于其父元素z-index比第二个div低，所以第一个div子元素会被第二个div及其子元素覆盖
(学习视频分享：css视频教程)
-
CSS层级关系
2020-03-14 22:59:11<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 100px; ...展开全文<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{ width: 100px; height: 300px; background: red; /*margin-left:100px;*/ position:absolute; top:100px; left:100px; z-index:3; } .box2{ width: 300px; height: 100px; background: blue; /*margin-top:-140px;*/ position:relative; top:150px; left:10px; z-index:4; } .btn1{ width: 300px; height: 100px; background: red; position:relative; top:100px; left:100px; /*z-index:100;*/ } .btn2{ width: 100px; height: 300px; background: pink; position:absolute; top:-40px; left:30px; z-index:-3; } </style> </head> <body> <!-- z-index:层级; 有定位的元素才可以修改层级关系 并列关系修改任何一个元素都ok 嵌套关系只能修改子集才能改变层级关系 --> <!--并列关系--> <!--<div class="box1"></div> <div class="box2"></div>--> <!--嵌套结构--> <div class="btn1"> <div class="btn2"></div> </div> </body> </html>
-
CSS层级遮挡，导致无法点击问题解决
2022-06-09 14:35:14因css层级覆盖、定位等，导致某些地方点击不生效 -
CSS 层级
2018-03-14 17:53:42总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位(relative,absolute,fixed)高于浮动，浮动高于标准流。（高低和占不占位置无关）（除去static之外）。...）（层级不取小数... -
CSS层级嵌套关系详解
2021-06-25 06:25:37} 原则三：越具体越强大 解释：当对某个元素的CSS选择符样式定义的越具体，层级越明确，该定义的优先级就越高。 CODE: .class1 .class2 .class3{font-size: 25px;} .class2 .class3{font-size:18px} .class3 { font... -
CSS z-index 层级关系优先级的概念
2020-12-13 10:18:38CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也... -
CSS层级总结
2017-06-05 18:15:02css层级总结 -
css层级选择器
2020-04-28 21:03:24文章目录 css层级选择器理论{#ek) nth中n的用法 代码展示 结果显示 刚开始学习前端，每天写一两个小模块 css层级选择器理论{#ek) E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素 说明：利用 :first-... -
解决CSS中子元素z-index与父元素兄弟节点的层级问题
2021-01-19 11:04:531.问题的出现 写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。 元素的结构大致如下： 列表项1 ... -
CSS 层级选择器
2019-02-21 14:32:00CSS 层级选择器 注：使用空格分隔，塞选到最后一项应用。 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!-- style 设置头部标签--> <style>... -
WEB前端之div css 层级
2021-06-14 08:30:18本文主要介绍了WEB前端的div css 层级，通过具体代码像大家展示，希望能够对大家学习WEB前端有所帮助。.box1{width: 200px;height: 200px;background-color: red;position: relative;z-index: 2;opacity: 0.5;filter... -
css定位和显示层级
2022-02-26 10:14:06CSS定位 定位元素 position 属性：relative 相对定位 absolute 绝对定位 fixed 固定定位 如果定位属性需要发生偏移需要搭配偏移量进行设置 水平方行设置：left 从页面左边向右移动 right 从页面右边向左移 垂直方向... -
css设置层级显示
2021-08-04 04:52:43效果：代码：样品要求书注意：position:relative;CSS 设置鼠标显示形状CSS 设置鼠标显示形状 -
css浮动和层级
2022-06-28 11:11:41层级和opacity 定位元素 > 浮动元素 > 文档流中的元素 当元素开启了定位以后，可以通过z-index来设置元素的层级,z-index值越高元素越优先显示,如果z-index值一样，或者都没有z-index则优先显示下边的元素,父元素永远... -
CSS层级选择器和伪类选择器
2021-01-22 22:03:30CSS层级选择器和伪类选择器 层级选择器 1.通过父级元素逐层找到子元素：父级元素选择器 子元素选择器 属性选择器 2.通过指定标签明和属性值的方法：标签名[属性名=属性值] 3.分组选择器：选择器1，选择器2，选择器3... -
CSS层级(浮动，定位的层级提升)
2020-03-16 21:12:00总结： 浮动提升半层，只有在浮动的时候 才需要考虑元素分两层 定位元素提升一层 相对定位会有残留 参考博客：... css权重参考博客： https://www.w3cplus.com/css/css-specificity-things-you-should-know.html -
CSS定位与层级的理解
2021-11-08 21:59:06有一次写项目，发现了一个我个人未理解的一个问题，就是z-index在定位中失效了，后来才发现假如给予层级、定位的盒子与另一个给予层级、定位的盒子为父子关系，那么z-index是不生效的。 尤其是在早期使用JS写页面... -
CSS3基础和层级选择器
2022-05-08 10:43:12一、CSS3基础 二、层级选择器 （1）子代选择器 <style> /* .box1 li{ border: 1px solid hotpink; } 这么写会给所有的后代都加上边框线（包括子二代） */ /* 子代选择器 */ .box1>li{ border... -
CSS_层级与透明度
2022-04-21 10:32:53z-index 层级 默认为最小值0 最大值无上限 opacity 透明度 0-1 --> 代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &... -
css层级优先 遇到的坑
2021-08-31 10:06:13项目中做了一个 退出二次确认 ，结果遇到了这么个问题：如下图展示： ...原因：本月 文本框 的css层级优先属性z-index大于等于 确认框； 办法：找到相关css 调整文本框层级优先属性小于二次弹出框 ... -
简单演示CSS的层级嵌套
2020-08-11 23:24:13CSS中的 id名、class名、标签名 层级嵌套的简单效果演示： <style> .blue h1{ color: blue; } .red h1{ color: red; } </style> <body> <h1>默认颜色的h1标签</h1> <... -
CSS基础(20)_元素的层级
2022-04-17 11:27:32元素的层级 -
CSS04：层级选择器
2022-02-10 16:48:15后代选择器 在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你 举例：body 后的所有 p 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">... ... -
css 层级问题
2018-11-09 22:12:12关于标签层级问题 1.z-index; 2.标签顺序。z-index解决不了的，就可能是标签顺序问题； -
20181127——Css层级嵌套关系详解
2018-11-27 14:54:36** 如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生... -
CSS层级小技巧：在滚动时自动添加头部阴影
2022-08-01 10:26:47固定头部的布局推荐用sticky实现，好处是可以保留头部占位，无需额外预留整体实现思路是CSS障眼法和CSS层级，相互遮挡fixed定位在不设置top或者left值时，仍然位于原先位置，但是会在这个位置固定下来absolute定位在...
