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 3D制作实战案例分析
Sep 18 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
浅谈php://filter的妙用
2019/03/05 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue debug 二种方法
2018/09/16 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
ipython和python区别详解
2019/06/26 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python中如何添加自定义模块
2020/06/09 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
创伤外科专业推荐信范文
2013/11/19 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
活动总结书
2014/05/08 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
公积金贷款承诺书
2015/04/30 职场文书
Python3 如何开启自带http服务
2021/05/18 Python