Css之scoped (有作用域的 CSS)
当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:
<template><div class="example">hi</div>
</template><style scoped>
.example {color: red;
}
</style>
转换结果:
<template><div class="example" data-v-f3f3eg9>hi</div>
</template><style>
.example[data-v-f3f3eg9] {color: red;
}
</style>
混用本地和全局样式
你可以在一个组件中同时使用有作用域和无作用域的样式:
<style>
/* 全局样式 */
</style><style scoped>
/* 本地样式 */
</style>
子组件的根元素
使用 scoped
后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
深度作用选择器
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。
动态生成的内容
通过 v-html
创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。
还有一些要留意
CSS 作用域不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式,当
p { color: red }
设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如.example { color: red }
,性能影响就会消除。你可以在这块试验田中测试它们的不同。在递归组件中小心使用后代选择器! 对选择器
.a .b
中的 CSS 规则来说,如果匹配.a
的元素包含一个递归子组件,则所有的子组件中的.b
都将被这个规则匹配。
Css之scoped (有作用域的 CSS)相关推荐
- 【Vue基础】关于Vue中CSS的scoped属性作用域与样式穿透
scoped 在了解scoped属性之前,先了解一下Vue(中的插件)在渲染DOM时干了什么.Vue在渲染DOM后会在DOM节点上生成一个随机串data属性,这一属性给了当前组件下的DOM一种唯一标识 ...
- 无法获取未定义或 null 引用的属性“text”_【CSS】是时候开始用 CSS 自定义属性了...
自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用.由自定义属性标记设定值(比如:--main-color: black;),由var() 函数 ...
- Web前端框架(JavaScript,CSS)、html组件、CSS规范与第三方库
1.什么是前端框架 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...
- 34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录 一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...
- 妙用CSS变量,让你的CSS变得更心动
作者:JowayYoung 仓库:Github.CodePen 博客:掘金.思否.知乎.简书.头条.CSDN 公众号:IQ前端 联系我:关注公众号后有我的微信哟 特别声明:原创不易,未经授权不得对此文 ...
- css+less+scss,你只懂CSS?做前端你还要会 Less、Sass或Stylus
网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要. 为什么需要CSS的预处理? CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域)等,要维护我们的CS ...
- php文章列表样式,css列表样式有哪些?css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式 水果 苹 ...
- css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码)
前言 本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...
- CSS综合征病例,医药-churg-strauss 综合征 (css) 变应性嗜酸性肉芽肿.ppt
医药-churg-strauss 综合征 (css) 变应性嗜酸性肉芽肿 Churg-Strauss 综合征 (css) 变应性嗜酸性肉芽肿血管炎 刘林 概念 是一类病因不明.主要累及中小动脉的系统性 ...
最新文章
- Blender写实产品创作学习教程
- PLSQL Developer 常用设置及快捷键
- 【书评】RHCSA/RHCE Red Hat Linux 认证学习指南(第6版)EX200 EX300
- 对Struts2的认识(-)
- node.js ejs的视图模块引擎
- jsp学习之路之安装Apache Tomcat7.0服务器
- Typora主题定制及常用配置的设置方法
- 20190913:(leetcode习题)罗马数字转整数
- Android 系统默认参数的修改
- 【ROS学习笔记】(三)发布者Publisher的实现
- Oracle宣布JDK 6死缓:计划赶不上变化
- mysql删完数据表空间没释放_mysql删除表后,空间一直不释放
- 1534 棋子游戏(博弈)
- excel 电阻并联计算_多个电阻并联公式 三个电阻并联公式
- SparkSQL和HiveSql的对比
- 计算机是什么信号转换为什么信号,模拟信号转化为数字信号的原理是什么
- android 画布心形,用CANVAS实现的心形动画效果
- opencv学习之视频帧率
- 通过server酱来发送爬虫爬到的数据
- 个人面试问答题知识库(一)百面机器学习篇