anchor.diff:        loading CSS in this manner.
   
         注意，这时候我们是在设置`styles`属性，**而不是**`styleUrls`属性！
  -      是模块打包器在加载CSS字符串，而不是Angular。
  -      Angular看到的只是打包器加载它们之后的CSS字符串。
  -      对Angular来说，这跟我们手写了`styles`数组没有任何区别。
  -      要了解这种CSS加载方式的更多信息，请参阅相应模块打包器的文档。
  +      是模块打包器在加载 CSS 字符串，而不是 Angular。
  +      Angular 看到的只是打包器加载它们之后的 CSS 字符串。
  +      对 Angular 来说，这跟我们手写了`styles`数组没有任何区别。
  +      要了解这种 CSS 加载方式的更多信息，请参阅相应模块打包器的文档。
   
   :marked
     ### Template Link Tags
  -  ### 模板中的link标签
  +
  +  ### 模板中的 link 标签
   
     We can also embed `<link>` tags into the component's HTML template. 
     
  -  我们也可以在组件的HTML模板中嵌入`<link>`标签。
  +  我们也可以在组件的 HTML 模板中嵌入`<link>`标签。
   
     As with `styleUrls`, the link tag's `href` URL is relative to the
     application root, not relative to the component file.
     
  -  像`styleUrls`标签一样，这个link标签的`href`指向的URL也是相对于应用的根目录的，而不是组件文件。
  +  像`styleUrls`标签一样，这个 link 标签的`href`指向的 URL 也是相对于应用的根目录的，而不是组件文件。
   
   +makeExample('component-styles/ts/app/hero-team.component.ts', 'stylelink')
     
   :marked
     ### CSS @imports
  +
     ### CSS @imports
   
     We can also import CSS files into our CSS files by using the standard CSS
     [`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).
     
  -  我们还可以利用标准的CSS[`@import`规则](https://developer.mozilla.org/en/docs/Web/CSS/@import)来把其它CSS文件导入到我们的CSS文件中。
  +  我们还可以利用标准的 CSS [`@import`规则](https://developer.mozilla.org/en/docs/Web/CSS/@import)来把其它
  +  CSS 文件导入到我们的 CSS 文件中。
   
   block css-import-url
     :marked
       In *this* case the URL is relative to the CSS file into which we are importing.
   
  -    在*这种*情况下，URL是相对于我们执行导入操作的CSS文件的。
  +    在*这种*情况下，URL 是相对于我们执行导入操作的 CSS 文件的。
   
   +makeExample('component-styles/ts/app/hero-details.component.css', 'import', 'app/hero-details.component.css (excerpt)')
   
  
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:   * An element that would be a Shadow DOM host in native encapsulation has a
      generated `_nghost` attribute. This is typically the case for component host elements.
      
      一个元素在原生封装方式下可能是 Shadow DOM 的宿主，在这里被自动添加上一个`_nghost`属性。
      这是组件宿主元素的典型情况。
  
    * An element within a component's view has a `_ngcontent` attribute
    that identifies to which host's emulated Shadow DOM this element belongs.
    
      组件视图中的每一个元素，都有一个`_ngcontent`属性，它会标记出该元素是哪个宿主的模拟 Shadow DOM。
  
    The exact values of these attributes are not important. They are automatically
    generated and we never refer to them in application code. But they are targeted
    by the generated component styles, which we'll find in the `<head>` section of the DOM:
    
    这些属性的具体值并不重要。它们是自动生成的，并且我们永远不会在程序代码中直接引用到它们。
    但它们会作为生成的组件样式的目标，就像我们在 DOM 的`<head>`区所看到的：
  
  code-example(format="").
    [_nghost-pmm-5] {
  