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 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
深入浅析python继承问题
2016/05/29 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python 随机按键模拟2小时
2020/12/30 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
运动会入场式解说词
2014/02/18 职场文书
人事专员的岗位职责
2014/03/01 职场文书
银行委托书范本
2014/09/28 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年教师节慰问信
2015/03/23 职场文书
警示教育片观后感
2015/06/17 职场文书
详解nginx location指令
2022/01/18 Servers