anchor.diff:    we want to change how our component looks based on that.
     
     有时候，基于某些来自组件视图*外部*的条件应用样式是很有用的。
  -  比如，在文档的`<body>`元素上可能有一个用于表示样式主题(Theme)的CSS类，而我们应当基于它来决定组件的样式。
  +  例如，在文档的`<body>`元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，而我们应当基于它来决定组件的样式。
   
     Use the `:host-context()` pseudo-class selector. It works just like the function
     form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
     up to the document root. It's useful when combined with another selector.
     
  -  这时可以使用`:host-context()`伪类选择器。它也以类似`:host()`形式使用。它在当前组件宿主元素的*祖先节点*中查找CSS类，
  +  这时可以使用`:host-context()`伪类选择器。它也以类似`:host()`形式使用。它在当前组件宿主元素的*祖先节点*中查找 CSS 类，
     直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。
   
     In the following example, we apply a `background-color` style to all `<h2>` elements *inside* the component, only
     if some ancestor element has the CSS class `theme-light`.
     
  -  在下面的例子中，只有当某个祖先元素有CSS类`theme-light`时，我们才会把`background-color`样式应用到组件*内部*的所有`<h2>`元素中。
  +  在下面的例子中，只有当某个祖先元素有 CSS 类`theme-light`时，我们才会把`background-color`样式应用到组件*内部*的所有`<h2>`元素中。
   
   +makeExample('component-styles/ts/app/hero-details.component.css', 'hostcontext')(format='.')
     
   :marked
     ### /deep/
  +
     ### /deep/
   
     Component styles normally apply only to the HTML in the component's own template. 
     
  -  “组件样式”通常只会作用于组件自身的HTML上。
  +  组件样式通常只会作用于组件自身的 HTML 上。
   
     We can use the `/deep/` selector to force a style down through the child component tree into all the child component views.
     The `/deep/` selector works to any depth of nested components, and it applies *both to the view
  
positive.code:   in the template of `HeroAppComponent`. Any `<h1>` elements elsewhere in
    the application are unaffected.
    
    首先，我们放在组件样式中的选择器，只会应用在组件自身的模板中。上面这个例子中的`h1`选择器只会对
    `HeroAppComponent`模板中的`<h1>`标签生效，而对应用中其它地方的`<h1>`元素毫无影响。
  
    This is a big improvement in modularity compared to how CSS traditionally works:
    
    这种模块化相对于CSS的传统工作方式是一个巨大的改进：
  
    1. We can use the CSS class names and selectors that make the most sense in the context of each component.
  
    1. 只有在每个组件的情境中使用CSS类名和选择器，才是最有意义的。
  
    1. Class names and selectors are local to the component and won't collide with 
    classes and selectors used elsewhere in the application.
  
    1. 类名和选择器是仅属于组件内部的，它不会和应用中其它地方的类名和选择器出现冲突。
  
    1. Our component's styles *cannot* be changed by changes to styles elsewhere in the application.
  
    1. 我们组件的样式*不会*因为别的地方修改了样式而被意外改变。
  
    1. We can co-locate the CSS code of each component with the TypeScript and HTML code of the component,
       which leads to a neat and tidy project structure.
       
    1. 我们可以让每个组件的CSS代码和它的TypeScript代码、HTML代码放在一起，这将促成清爽整洁的项目结构。
  
    1. We can change or remove component CSS code in the future without trawling through the
       whole application to see where else it may have been used. We just look at the component we're in.
  
    1. 将来我们可以修改或移除组件的CSS代码，而不用遍历整个应用来看它有没有被别处用到，只要看看当前组件就可以了。
  
  a(id="special-selectors")
  .l-main-section
  :marked
    ## Special selectors
    ## 特殊的选择器
  
    Component styles have a few special *selectors* from the world of 
    [shadow DOM style scoping](https://www.w3.org/TR/css-scoping-1):
    
    “组件样式”中有一些从[Shadow DOM style scoping(范围化样式)](https://www.w3.org/TR/css-scoping-1)领域引入的特殊*选择器*：
  
    ### :host
    ### :host
  
    Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
    targeting elements *inside* the component's template):
    
    使用`:host`伪类选择器，用来选择组件*宿主*元素中的元素(相对于组件模板*内部*的元素)。
  
  +makeExample('component-styles/ts/app/hero-details.component.css', 'host')(format='.')
  
  
negative.code: 
    In the next example we target the host element again, but only when it also has the `active` CSS class.
    
    在下一个例子中，我们又一次把宿主元素作为目标，但是只有当它同时带有`active` CSS 类的时候才会生效。
  
  +makeExample('component-styles/ts/app/hero-details.component.css', 'hostfunction')(format=".")
    
  :marked
    ### :host-context
  
    ### :host-context
  
    Sometimes it is useful to apply styles based on some condition *outside* a component's view.
  