CSS作用域(样式分割)的使用汇总


Posted in HTML / CSS onNovember 07, 2021

一、CSS作用域(样式分割)的使用

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

CSS作用域(样式分割)的使用汇总

二、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属性,修改其他第三方组件样式。

CSS作用域(样式分割)的使用汇总

方法二: 使用两个style标签,一个带scoped属性,一个不带scoped属性,用来修改第三方组件的样式。

CSS作用域(样式分割)的使用汇总

方法三: 使用sass或less的样式穿透 /deep/

CSS作用域(样式分割)的使用汇总

方法四: 通过在最外层加 id或者 class的形式进行区分。

到此这篇关于CSS作用域(样式分割)的文章就介绍到这了,更多相关CSS作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
使用正则替换变量
2007/05/05 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Django的分页器实例(paginator)
2017/12/01 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python实现简单神经网络算法
2018/03/10 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
汽车驾驶求职信
2013/10/25 职场文书
小学教研工作制度
2014/01/15 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
综治宣传月活动总结
2014/04/28 职场文书
搞笑车尾标语
2014/06/23 职场文书
班级活动总结格式
2014/08/30 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript