两个页面共用了一个filter组件，样式是bootstrap的，有媒体查询


特殊的选择器

组件样式中有一些从影子(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​​src/app/hero-details.component.css

:host(.active) {
  border-width: 3px;
}

:host-context 选择器

有时候，基于某些来自组件视图外部的条件应用样式是很有用的。 例如，在文档的 ​​<body>​​这时可以使用 ​​:host-context()​​ 伪类选择器。它也以类似 ​​:host()​​ 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。在下面的例子中，只有当某个祖先元素有 CSS 类 ​​theme-light​​ 时，才会把 ​​background-color​​ 样式应用到组件内部的所有 ​​<h2>​​src/app/hero-details.component.css

:host-context(.theme-light) h2 {
  background-color: #eef;
}

已废弃 /deep/、>>> 和 ::ng-deep


Angular4_父组件中修改子组件样式_CSS

直接：

delivery-order-grid class= "active" 也行

Angular4_父组件中修改子组件样式_选择器_02