CSS作用域（样式分割）的使用汇总

一、CSS作用域（样式分割）的使用

在vue中，让css样式只在当前组件中 生效 ： sco PE d 属性是 HT ML 5 中的 新属性 ，是一个布尔属性，如果使用该属性，则样式仅仅应用到 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作用域（样式分割）的使用汇总 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS作用域（样式分割）的使用汇总的详细内容...