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悬停效果案例应用
Nov 21 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
You might like
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php实现网页端验证码功能
2017/07/11 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
航空大学应届生求职信
2013/11/10 职场文书
正规的求职信范文分享
2013/12/11 职场文书
班主任工作经验材料
2014/02/02 职场文书
政治思想表现评语
2014/05/04 职场文书
设计顾问服务计划书
2014/05/04 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Python如何识别银行卡卡号?
2021/06/10 Python