vue、angular深度做用选择器

Vue适用的深度选择器

在 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 标签。

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

1. 可使用对每一个组件最有意义的 CSS 类名和选择器。
2. 类名和选择器是局限于该组件的，它不会和应用中其它地方的类名和选择器冲突。
3. 组件的样式不会由于别的地方修改了样式而被意外改变。
4. 你可让每一个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一块儿，这将促成清爽整洁的项目结构。
5. 未来你能够修改或移除组件的 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，以便兼容未来的工具。