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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
php开启安全模式后禁用的函数集合
2011/06/26 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
js传值 判断
2006/10/26 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
提升Python程序性能的7个习惯
2019/04/14 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
经济系大学生求职信
2013/10/01 职场文书
化工专业推荐信范文
2013/11/28 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
电视购物广告词
2014/03/19 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
污水处理保证书
2015/05/09 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Java存储没有重复元素的数组
2022/04/29 Java/Android