anchor.diff:    :marked
       The `import` statement specifies symbols from the Angular `core`:
   
  -    `import`语句指定了从Angular的`core`库导入的一些符号。
  +    `import`语句指定了从 Angular 的`core`库导入的一些符号。
   
       1. `Directive` provides the functionality of the `@Directive` decorator.
   
  -    1. `Directive`提供`@Directive`装饰器功能。
  +       `Directive`提供`@Directive`装饰器功能。
   
       1. `ElementRef` [injects](dependency-injection.html) into the directive's constructor
  -
  -    1. `ElementRef` [注入](dependency-injection.html)到指令构造函数中。
  -
       so the code can access the DOM element.
   
  -    这样代码可以访问DOM元素。
  +       `ElementRef`[注入](dependency-injection.html)到指令构造函数中。
  +    这样代码可以访问 DOM 元素。
   
       1. `Input` allows data to flow from the binding expression into the directive.
   
  -    1. `Input`将数据从绑定表达式传达到指令中。
  +       `Input`将数据从绑定表达式传达到指令中。
   
       1. `Renderer` allows the code to change the DOM element's style.
   
  -    1. `Renderer` 让代码可以改变DOM元素的样式。
  +       `Renderer` 让代码可以改变 DOM 元素的样式。
   
       Next, the `@Directive` decorator function contains the directive metadata in a configuration object
       as an argument.
   
  -    然后，`@Directive`装饰器函数以“配置对象”参数的形式，包含了指令的元数据。
  +    然后，`@Directive`装饰器函数以配置对象参数的形式，包含了指令的元数据。
   :marked
     `@Directive` requires a CSS selector to identify
     the HTML in the template that is associated with the directive.
   
  -  属性型指令的`@Directive`装饰器需要一个css选择器，以便从模板中识别出关联到这个指令的HTML。
  +  `@Directive`装饰器需要一个 CSS 选择器，以便从模板中识别出关联到这个指令的 HTML。
   
   
     The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  
positive.code:   Now that you're getting the highlight color as an input, modify the `onMouseEnter()` method to use
    it instead of the hard-coded color name and define red as the default color.
  
    现在，通过输入型属性得到了高亮的颜色，然后修改`onMouseEnter()`来使用它代替硬编码的那个颜色名。
    我们还把红色定义为默认颜色，以便在用户忘了绑定颜色时作为备用。
  
  +makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')
  :marked
  
negative.code:   Here, the directive's selector is `[myHighlight]`.
    Angular will locate all elements in the template that have an attribute named `myHighlight`.
  
    [用于 attribute 的 CSS 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
    这里，指令的选择器是`[myHighlight]`，Angular 将会在模板中找到所有带`myHighlight`属性的元素。
  
  .l-sub-section
    :marked
      ### Why not call it "highlight"?
  
      ### 为什么不直接叫做 "highlight"？
  
      Though *highlight* is a more concise name than *myHighlight* and would work,
      a best practice is to prefix selector names to ensure
      they don't conflict with  standard HTML attributes.
      This also reduces the risk colliding with third-party directive names.
  
      尽管*highlight* 是一个比 *myHighlight* 更简洁的名字，而且它确实也能工作。
      但是最佳实践是在选择器名字前面添加前缀，以确保它们不会与标准 HTML 属性冲突。
      它同时减少了与第三方指令名字发生冲突的危险。
  
      Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
      that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose. For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
  
      确认你**没有**给`highlight`指令添加**`ng`**前缀。
      那个前缀属于 Angular，使用它可能导致难以诊断的 bug。例如，这个简短的前缀`my`可以帮助你区分自定义指令。
  p
    | After the #[code @Directive] metadata comes the directive's controller class, called #[code HighlightDirective], which contains the logic for the directive.
    | Exporting #[code HighlightDirective] makes it accessible to other components.
  
  p
    | #[code @Directive]元数据的后面就是指令的控制器类，叫做#[code HighlightDirective]，它包括了指令的工作逻辑。
    | 导出#[code HighlightDirective]以便让它可以被其它组件访问。
  :marked
    Angular creates a new instance of the directive's controller class for
    each matching element, injecting an Angular `ElementRef` and `Renderer`
  