在 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深度作用选择器,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
- vue操作下拉选择器获取选择的数据的id方法
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- Vue Element 分组+多选+可搜索Select选择器实现示例
- 详解VUE-地区选择器(V-Distpicker)组件使用心得
- vue2.0.js的多级联动选择器实现方法
- vue与bootstrap实现时间选择器的示例代码
- 基于vue2.0实现的级联选择器
- 前端框架学习总结之Angular、React与Vue的比较详解
- VueJs与ReactJS和AngularJS的异同点
- Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
- vue,angular,avalon这三种MVVM框架优缺点
