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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
js断点调试经验分享
2017/12/08 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
python collections模块的使用
2020/10/16 Python
python自动生成sql语句的脚本
2021/02/24 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
简单说说tomcat的配置
2013/05/28 面试题
大学生毕业求职自荐书范文
2014/02/04 职场文书
经典英文广告词
2014/03/18 职场文书
新闻发布会策划方案
2014/06/12 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
出租车拒载检讨书
2015/01/28 职场文书
千与千寻观后感
2015/06/04 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL