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进度条效果
Feb 22 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
canvas烟花特效锦集
Jan 17 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
ie 调试javascript的工具
2009/04/29 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python pip 常用命令汇总
2020/10/19 Python
Python函数调用追踪实现代码
2020/11/27 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
白莲教口号
2014/06/18 职场文书
政府四风问题整改措施
2014/10/04 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL