Site updated: 2017-06-26 15:35:58

Jinjiang · Jinjiang · commit e4881fadf01f · 2017-06-26T15:35:59.000+08:00
diff --git a/v2/guide/comparison.html b/v2/guide/comparison.html
@@ -641,7 +641,7 @@ <h4 id="JSX-vs-Templates"><a href="#JSX-vs-Templates" class="headerlink" title="
 <p>更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。</p>
 <h4 id="CSS-的组件作用域"><a href="#CSS-的组件作用域" class="headerlink" title="CSS 的组件作用域"></a>CSS 的组件作用域</h4><p>除非你把组件分布在多个文件上(例如 <a href="https://github.com/gajus/react-css-modules" target="_blank" rel="external">CSS Modules</a>)，要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作，但是稍微复杂点的，比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。</p>
 <p>而 Vue 可以让你在每个<a href="single-file-components.html">单文件组件</a>中完全访问 CSS。</p>
-<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="undefined"></span></div><div class="line">    @media (min-width: 250px) &#123;</div><div class="line">        .list-container:hover &#123;</div><div class="line">            background: orange;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></div><div class="line">    @<span class="keyword">media</span> (min-width: <span class="number">250px</span>) &#123;</div><div class="line">        <span class="selector-class">.list-container</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">            <span class="attribute">background</span>: orange;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div></pre></td></tr></table></figure>
 <p>这个可选 <code>scoped</code> 属性会自动添加一个唯一的属性（比如 <code>data-v-21e5b78</code>）为组件内 CSS 指定作用域，编译的时候 <code>.list-container:hover</code> 会被编译成类似 <code>.list-container[data-v-21e5b78]:hover</code>。</p>
 <p>如果你已经熟悉 CSS Modules，Vue 单文件组件也有 <a href="http://vue-loader.vuejs.org/en/features/css-modules.html" target="_blank" rel="external">first-class 支持它</a>。</p>
 <p>最后，就像 HTML 一样，你可以选择自己偏爱的 CSS 预处理器（或后处理器）编写 CSS，这些生态系统允许您利用现有的库。这可以让你围绕设计为中心展开工作，,比如您的构建过程中颜色操作，而不是引入专门的库来增加你应用的体积和复杂度。</p>
