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盒子模型详解
Apr 24 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
php基础知识:类与对象(1)
2006/12/13 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
PDO::rollBack讲解
2019/01/29 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
JS变量及其作用域
2017/03/29 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
浅谈JS的原型和继承
2019/05/08 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
学期自我评价
2014/01/27 职场文书
《王二小》教学反思
2014/02/27 职场文书
秋季运动会开幕词
2015/01/28 职场文书
勇敢的心观后感
2015/06/09 职场文书
大学生军训感言
2015/08/01 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python