很多朋友都对“CSS中scoped属性怎么样用，实现原理是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

一、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中scoped属性怎么样用，实现原理是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS实现骰子效果的方法和代码是什么

  用CSS实现骰子效果的方法和代码是什么？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

• css引入字体@font-face的兼容问题怎样解决?

  在做网页的时候，我们使用@font-face来引入字体是非常方便的。但是通过@font-face引入字体时，兼容问题是需要考虑的，因为不同浏览器的兼容效果是不同的，那么对此我们要怎样解决兼容的问题呢？下面我们来具体的了解一下。

• 在CSS中怎么把元素隐藏，方法有什么

  1.opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响<divclass="div1">snda:opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响</div><p>ppskdkad</p>.div1{opacity:0;width:200px;height:200px;border:1pxsolidred;}2.visibility:hidden还是只是把元素隐藏了，但是还是占有布 ...

• CSS中实现元素垂直居中的不同情况及方法是什么

  css实现元素垂直居中显示的方式有哪些？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• CSS比较函数有哪些及用法是什么

  CSS比较函数从2020年4月就开始支持了，我喜欢使用这些函数，但最喜欢的是 clamp()，它也是我最常用的一个。在这节课中，我们详细来看下这些比较函数。