css中属性和值用什么分割,css分割线样式

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

　　在vue中，让css样式只在当前组件中生效：scoped attribute是HTML5中新增的属性，是一个布尔属性。如果使用此属性，则样式仅应用于style元素的父元素及其子元素。

二、scoped的实现原理

　　 vue中scoped属性的效果主要是通过PostCSS翻译来实现的。以下是翻译前的VUE电码：

　　样式范围。测试{颜色：蓝色；}/style template div class= test hi world/div/template翻译后：

　　风格。测试[data-v-5559930f] {颜色：蓝色；}/style template div class= test data-v-5559930 fhi world/div/template postcss给一个组件中的所有DOM添加一个唯一的动态属性，然后给css选择器添加一个对应的属性选择器来选择组件中的DOM。这种做法使得样式只作用于包含该属性的DOM组件的内部DOM。

三、scoped穿透方法

　　在很多项目中，引用第三方组件时，需要在组件中局部修改第三方组件的样式，但你又不想移除scoped属性造成组件间的样式污染。这时候就需要一些特殊的方式来穿透scoped。

　　方法一：使用scoped属性修改其他第三方组件样式。

　　方法二：使用两个样式标签，一个带有作用域属性，另一个没有作用域属性，来修改第三方组件的样式。

　　方法三：用sass或更少的风格穿透/深入/

　　方法四：通过在最外层添加id或class来区分。

　　关于CSS作用域(样式分段)的这篇文章到此为止。更多相关CSS范围内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。