CSS作用域(样式分割)的使用汇总
2021-11-23 04:07
531 查看
一、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作用域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容
- div+css使用backgroundRepeat样式设置背景图片的显示方式
- 描述下 “reset” CSS 文件的作用和使用它的好处。
- 使用CopySourceAsHtml+CSS, 打造Dflying Chen博客上的源代码样式
- 解决<fx:Style>样式设置中报错 必须使用命名空间限定 CSS 选择器“Alert”中的类型“Alert”
- 描述下 “reset” CSS 文件的作用和使用它的好处。
- html css 鼠标形状样式汇总
- CSS样式里使用JavaScript
- 使用CSS去除表格默认样式的间距
- hta工具:从.css文件中清理不使用的样式类(id或class类)
- 使用css进行浏览器样式清零
- 描述下 “reset” CSS 文件的作用和使用它的好处。
- HTML+CSS使用CSS为网页添加样式 (4)
- Jquery使用css方法改变样式实例
- html/css学习零星笔记(一)——如何使用样式
- CSS:使用:first-letter设置首字样式
- 怎么让input里的text和button使用不同的css样式
- jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)
- 让IE7/8使用CSS中first-child和last-child样式属性
- 使用css打造自定义select(非模拟)实现原理及样式