CSS作用域(样式分割)的使用汇总

发布时间:2022-04-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了CSS作用域(样式分割)的使用汇总脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、CSS作用域(样式分割)的使用

在vue中,让css样式只在当前组件中生效scoPEd 属性是 HTML5 中的新属性,是一个布尔属性,如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

在这里插入图片描述

二、scoped的实现原理

vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码:

  <style scoped>
    .test {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test">Hi world</div>
  </template>

转译后:

  <style>
    .test[data-v-5559930f] {
      color: blue;
    }
  </style>
  
  <template>
    <div class="test" data-v-5559930f>Hi world</div>
  </template>

PostCSS给一个组件中的所有DOM添加一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中的DOM,这种做法使得样式只作用于含有该属性的DOM<组件内部DOM>。

三、scoped穿透方法

在很多项目中,当引用第三方组件,需要再组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。这时就需要采用一些特殊的方式来进行穿透scoped。

方法一: 使用>>>可以穿透scoped属性,修改其他第三方组件样式。

在这里插入图片描述

方法二: 使用两个style标签,一个带scoped属性,一个不带scoped属性,用来修改第三方组件的样式。

在这里插入图片描述

方法三: 使用sass或less的样式穿透 /deep/

在这里插入图片描述

方法四: 通过在最外层加 id或者 class的形式进行区分。

到此这篇关于CSS作用域(样式分割)的文章就介绍到这了,更多相关CSS作用域内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的CSS作用域(样式分割)的使用汇总全部内容,希望文章能够帮你解决CSS作用域(样式分割)的使用汇总所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: