CSS中scoped属性怎样使用，实现原理是什么

发布时间：2023-09-21 09:27:50 所属栏目：语言来源：

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

很多朋友都对“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的形式进行区分。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!