如何实现vue、angular深度作用选择器

小编给大家分享一下如何实现vue、angular深度作用选择器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

Vue适用的深度选择器

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

less使用/deep/
css使用>>>

Angular适用深度选择器

使用组件样式

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

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

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

}

范围化的样式

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

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

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

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

1. 可以使用对每个组件最有意义的 CSS 类名和选择器。

2. 类名和选择器是局限于该组件的，它不会和应用中其它地方的类名和选择器冲突。

3. 组件的样式不会因为别的地方修改了样式而被意外改变。

4. 你可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起，这将促成清爽整洁的项目结构。

5. 将来你可以修改或移除组件的 CSS 代码，而不用遍历整个应用来看它有没有在别处用到。

特殊的选择器

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

:host

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

<!--class="lazy" data-src/app/hero-details.component.css-->:host {
 display: block;
 border: 1px solid black;
}

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

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

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

<!--class="lazy" data-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 样式应用到组件内部的所有 h3 元素中。

<!--class="lazy" data-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 中的所有子元素：

<!--class="lazy" data-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深度作用选择器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！