解析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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
Vue.js的模板语法详解
Feb 16 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
php与js的区别是什么
2013/08/05 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
简述python Scrapy框架
2020/08/17 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Julep官网:美容产品和指甲油
2017/02/25 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
《风筝》教学反思
2014/04/10 职场文书
工作说明书范文
2014/05/07 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
2014年导购员工作总结
2014/11/18 职场文书
家装业务员岗位职责
2015/04/03 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis