解析vue、angular深度作用选择器


Posted in Javascript onSeptember 11, 2019

在 Vue 的开发中,我们经常会用到外部组件库,例如 element,当使用 element 组件库中的某一个组件的时,我们可能会希望有一些定制的地方,通常的做法是 用CSS覆盖;有时层级不够就要另辟他径。

less使用/deep/

css使用>>>

Angular适用深度选择器

使用组件样式

对你编写的每个 Angular 组件来说,除了定义 HTML 模板之外,还要定义用于模板的 CSS 样式、 指定任意的选择器、规则和媒体查询。

实现方式之一,是在组件的元数据中设置 styles 属性。 styles 属性可以接受一个包含 CSS 代码的字符串数组。 通常你只给它一个字符串就行了,如同下例:

<!--src/app/hero-app.component.ts-->

@Component({
 selector: 'app-root',
 template: `
  <h1>Tour of Heroes</h1>
  <app-hero-main [hero]="hero"></app-hero-main>
 `,
 styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
/* . . . */
}

范围化的样式

在@Component的元数据中指定的样式只会对该组件的模板生效

它们既不会被模板中嵌入的组件继承,也不会被通过内容投影(如 ng-content)嵌进来的组件继承。

在这个例子中,h1 的样式只对 HeroAppComponent 生效,既不会作用于内嵌的 HeroMainComponent ,也不会作用于应用中其它任何地方的 h1 标签。

这种范围限制就是所谓的样式模块化特性

  • 可以使用对每个组件最有意义的 CSS 类名和选择器。
  • 类名和选择器是局限于该组件的,它不会和应用中其它地方的类名和选择器冲突。
  • 组件的样式不会因为别的地方修改了样式而被意外改变。
  • 你可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起,这将促成清爽整洁的项目结构。
  • 将来你可以修改或移除组件的 CSS 代码,而不用遍历整个应用来看它有没有在别处用到。

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域(记录在W3C的CSS Scoping Module Level 1中) 引入的特殊选择器:

:host

使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。

<!--src/app/hero-details.component.css-->

:host {
 display: block;
 border: 1px solid black;
}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。

要把宿主样式作为条件,就要像函数一样把其它选择器放在 :host 后面的括号中。

下一个例子再次把宿主元素作为目标,但是只有当它同时带有 active CSS 类的时候才会生效。

<!--src/app/hero-details.component.css-->

content_copy
:host(.active) {
 border-width: 3px;
}

:host-context

有时候,基于某些来自组件视图外部的条件应用样式是很有用的。 例如,在文档的 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类,你应当基于它来决定组件的样式。

这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类, 直到文档的根节点为止。在与其它选择器组合使用时,它非常有用。

在下面的例子中,只有当某个祖先元素有 CSS 类 theme-light 时,才会把 background-color 样式应用到组件内部的所有 h2 元素中。

<!--src/app/hero-details.component.css-->

content_copy
:host-context(.theme-light) h2 {
 background-color: #eef;
}

已废弃 /deep/、>>> 和 ::ng-deep

组件样式通常只会作用于组件自身的 HTML 上。

把伪类 ::ng-deep 应用到如何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中,请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用,该样式就会污染其它组件。

这个例子以所有的 h3 元素为目标,从宿主元素到当前元素再到 DOM 中的所有子元素:

<!--src/app/hero-details.component.css-->

content_copy
:host /deep/ h3 {
 font-style: italic;
}

/deep/ 组合器还有两个别名:>>> 和 ::ng-deep。

/deep/ 和 >>> 选择器只能被用在仿真 (emulated) 模式下。 这种方式是默认值,也是用得最多的方式。 更多信息,见控制视图封装模式一节。

CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃,并将这个特性从主流浏览器和工具中移除。 因此,我们也将在 Angular 中移除对它们的支持(包括 /deep/、>>> 和 ::ng-deep)。 目前,建议先统一使用 ::ng-deep,以便兼容将来的工具。

总结

以上所述是小编给大家介绍的vue、angular深度作用选择器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
原生JavaScript实现进度条
Feb 19 Javascript
javascript 构建模块化开发过程解析
Sep 11 #Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 #Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 #Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 #Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 #Javascript
js简单的分页器插件代码实例
Sep 11 #Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
js资料toString 方法
2007/03/13 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Python中强大的命令行库click入门教程
2016/12/26 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python实现Floyd算法
2018/01/03 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python中偏函数用法示例
2018/06/07 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
给女朋友的道歉信
2014/01/10 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
市场营销策划方案
2014/06/11 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
团员年度个人总结
2015/02/26 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS