css 样式穿透(深度样式选择器)的使用

简介: css 样式穿透(深度样式选择器)的使用

最近在使用uniapp,做一款跨平台的APP,用到了UI框架和一些uniapp的组件,很多时候组件的样式不能满足需求,但是修改的时候又无法修改;


原因就是scoped的问题,组件中习惯使用一个带有scoped属性的Style标签,当然也是为了防止组件之间的样式冲突问题,scoped属性效果,就是在编译打包后在当前组件标签中统一添加一个随机属性(v-data-356hjxxxxxxx),下图所示:

20210527153548522.png 这个问题该怎么解决呢?

可以使用css里面的样式穿透,官网vue-loader中我们所谓的样式穿透,官方叫做深度作用选择器

用法1:stylus样式穿透,使用  >>>

<style scoped>
.a >>> .b { /* ... */ }
</style>

编译后:

.a[data-v-f3f3eg9] .b { /* ... */ }

用法2:Sass和Less的样式穿透

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

父组件 : : v-deep 子组件

父组件 / deep / 子组件

.evan-border ::v-deep .evan-form-item-container {
  border: none;
}
.tell-language /deep/ .dropWrap {
  width: 195rpx;
}
相关文章
|
5月前
|
前端开发
|
9月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
10月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
275 5
|
10月前
|
前端开发 JavaScript UED
|
10月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
252 2
|
10月前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
10月前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
10月前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。