边肖想和大家分享一下如何实现vue和角度深度选择器。我相信大多数人还不太了解它。因此，我想分享这篇文章供你参考。希望你看完这篇文章后收获多多。让我们一起来看看。
Vue的深度选择器。
在Vue的开发中，我们经常使用外部组件库，比如element。当在元素组件库中使用组件时，我们可能希望进行一些定制。通常的方法是用CSS覆盖它。有时候，如果层次不够，就要另辟蹊径。
较少使用/深度/
使用css的角度深度选择器。
使用组件样式。
对于您编写的每个Angular组件，除了定义HTML模板之外，还应该为模板定义CSS样式，指定任意选择器、规则和媒体查询。
一种方法是在组件的元数据中设置styles属性。属性可以接受包含CSS代码的字符串数组。通常，您只需给它一个字符串，如下例所示：
！-src/app/hero-app . Component . ts-@ Component({ 0
selector: '应用程序根目录'，
模板： ` h2tourhoes/H2
app-英雄-主[英雄]='英雄'/app-英雄-主
`,
style s : [' H2 { font-weight : normal；}']
})
exportclassHeroAppComponent {
/*.*/
}限定范围的样式。
@Component的元数据中指定的样式只会在该组件的模板上生效。
它们不会被模板中嵌入的组件继承，也不会被通过内容投影(如ng-content)嵌入的组件继承。
在这个例子中，h2的样式只对HeroAppComponent有效，它不会影响应用程序中任何其他地方的嵌入式heromiancomponentnor或h2标记。
这个范围限制就是所谓的风格模块化特征。
您可以使用对每个组件最有意义的CSS类名和选择器。
类名和选择器仅限于此组件，不会与应用程序中其他地方的类名和选择器冲突。
组件的样式不会意外更改，因为样式已在其他地方修改。
您可以将每个组件的CSS代码与其TypeScript和HTML代码放在一起，这将导致一个干净整洁的项目结构。
将来，您可以修改或移除组件的CSS代码，而不是遍历整个应用程序来查看它是否在其他地方使用。
的专用选择器。
样式中有一些从Shadow) DOM样式(记录在W3C的CSS作用域模块级别1中)的作用域字段中引入的特殊选择器：
:主机
使用：host伪类选择器选择组件宿主元素中的元素(相对于组件模板中的元素)。
！-src/app/hero-details.component . CSS-: host {
显示：块；
border:1pxsolidblack
} :选择主机是定位主机元素的唯一方法。此外，您将无法指定它，因为主机不是组件本身模板的一部分，而是父组件模板的一部分。
要使用主机样式作为条件，请将其他选择器放在：host like函数后面的括号中。
下一个示例再次以宿主元素为目标，但是只有当它也有活动的CSS类时才会生效。
！-src/app/hero-details.component . CSS-content _ copy
:主机(。活动){ 0
边框宽度：3 px；
} :主机上下文
有时，基于组件视图外部的特定条件应用样式很有用。例如，文档的某个元素上可能有一个CSS类来表示样式主题，您应该根据它来决定组件的样式。
此时，您可以使用：host-context()。
伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。
在下面的例子中，只有当某个祖先元素有 CSS 类 theme-light 时，才会把 background-color 样式应用到组件内部的所有 h3 元素中。
<!--src/app/hero-details.component.css-->content_copy
:host-context(.theme-light) h3 {
background-color: #eef;
已废弃 /deep/、>>> 和 ::ng-deep
组件样式通常只会作用于组件自身的 HTML 上。
把伪类 ::ng-deep 应用到如何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用，该样式就会污染其它组件。
这个例子以所有的 h4 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：
<!--src/app/hero-details.component.css-->content_copy
:host /deep/ h4 {
font-style: italic;
}
/deep/ 组合器还有两个别名：>>> 和 ::ng-deep。
/deep/ 和 >>> 选择器只能被用在仿真 (emulated) 模式下。 这种方式是默认值，也是用得最多的方式。 更多信息，见控制视图封装模式一节。
CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。 因此，我们也将在 Angular 中移除对它们的支持（包括 /deep/、>>> 和 ::ng-deep）。 目前，建议先统一使用 ::ng-deep，以便兼容将来的工具。
以上是“如何实现vue、angular深度作用选择器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/35992.html