CSS样式穿透的几种方法

通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透。

CSS使用样式穿透的方法有以下几种：

1、使用 >>>符号：

.container >>> .el-input__inner {width: 160px;
}

该方法适用的样式语法：css、stylus

2、使用 /deep/：

.container /deep/ .el-input__inner {width: 160px;
}

该方法适用的样式语法：sass、scss、less

3、使用 ::v-deep：

::v-deep .el-input__inner {width: 160px;
}

该方法对所有样式语法通用，即适用于 css、stylus、sass、scss 和 less

其中/deep/ 和 ::v-deep 属于深度选择器。

CSS样式穿透的几种方法相关推荐

网页中使用CSS样式表的五种方法
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
引入CSS样式表的三种方法
1.行内式 <标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何H ...
css样式穿透（深度选择器）
1. 什么情况下使用样式穿透引入第三方组件库(如element-ui.element-plus),修改第三方组件库的样式样式文件中使用了 scoped 属性,但是为了确保每个组件之间不存在相互影响 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
前端面试题：使用css生成田字格的四种方法
使用css生成田字格的四种方法 html结构 css基础样式第一种 flex布局第二种绝对定位第三种 css瀑布流第四种 float浮动 html结构 <div class=" ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...
css样式引入形式php,引入css样式表的四种方式介绍
一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. 这种用法的优点是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签: 将样式规则写在标签之 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...

CSS样式穿透的几种方法

CSS样式穿透的几种方法相关推荐

最新文章

热门文章