解析vue、angular深度作用选择器
在Vue的开发中，我们经常会用到外部组件库，例如element，当使用element组件库中的某一个组件的时，我们可能会希望有一些定制的地方，通常的做法是用CSS覆盖；有时层级不够就要另辟他径。
less使用/deep/
css使用>>>
Angular适用深度选择器
使用组件样式
对你编写的每个Angular组件来说，除了定义HTML模板之外，还要定义用于模板的CSS样式、指定任意的选择器、规则和媒体查询。
实现方式之一，是在组件的元数据中设置styles属性。styles属性可以接受一个包含CSS代码的字符串数组。通常你只给它一个字符串就行了，如同下例：
@Component({
selector:'app-root',
template:`
TourofHeroes
`,
styles:['h1{font-weight:normal;}']
})
exportclassHeroAppComponent{
/*...*/
}
范围化的样式
在@Component的元数据中指定的样式只会对该组件的模板生效
它们既不会被模板中嵌入的组件继承，也不会被通过内容投影（如ng-content）嵌进来的组件继承。
在这个例子中，h1的样式只对HeroAppComponent生效，既不会作用于内嵌的HeroMainComponent，也不会作用于应用中其它任何地方的h1标签。
这种范围限制就是所谓的样式模块化特性
- 可以使用对每个组件最有意义的CSS类名和选择器。
- 类名和选择器是局限于该组件的，它不会和应用中其它地方的类名和选择器冲突。
- 组件的样式不会因为别的地方修改了样式而被意外改变。
- 你可以让每个组件的CSS代码和它的TypeScript、HTML代码放在一起，这将促成清爽整洁的项目结构。
- 将来你可以修改或移除组件的CSS代码，而不用遍历整个应用来看它有没有在别处用到。
特殊的选择器
组件样式中有一些从影子(Shadow)DOM样式范围领域（记录在W3C的CSSScopingModuleLevel1中）引入的特殊选择器：
:host
使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。
:host{
display:block;
border:1pxsolidblack;
}
:host选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它，因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。
要把宿主样式作为条件，就要像函数一样把其它选择器放在:host后面的括号中。
下一个例子再次把宿主元素作为目标，但是只有当它同时带有activeCSS类的时候才会生效。
content_copy
:host(.active){
border-width:3px;
}
:host-context
有时候，基于某些来自组件视图外部的条件应用样式是很有用的。例如，在文档的元素上可能有一个用于表示样式主题(theme)的CSS类，你应当基于它来决定组件的样式。
这时可以使用:host-context()伪类选择器。它也以类似:host()形式使用。它在当前组件宿主元素的祖先节点中查找CSS类，直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。
在下面的例子中，只有当某个祖先元素有CSS类theme-light时，才会把background-color样式应用到组件内部的所有h2元素中。
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中的所有子元素：
content_copy
:host/deep/h3{
font-style:italic;
}
/deep/组合器还有两个别名：>>>和::ng-deep。
/deep/和>>>选择器只能被用在仿真(emulated)模式下。这种方式是默认值，也是用得最多的方式。更多信息，见控制视图封装模式一节。
CSS标准中用于"刺穿ShadowDOM"的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。因此，我们也将在Angular中移除对它们的支持（包括/deep/、>>>和::ng-deep）。目前，建议先统一使用::ng-deep，以便兼容将来的工具。
总结
以上所述是小编给大家介绍的vue、angular深度作用选择器,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。