docs: translate sfc-style.md (#653)

* docs: translate sfc-style.md

* Apply suggestions from code review

Co-authored-by: wxsm <[email protected]>

* fix: reserver property and attribute in translation

* Apply suggestions from code review

Co-authored-by: Godpu <[email protected]>

* Update src/api/sfc-style.md

Co-authored-by: Arron Zou <[email protected]>

Co-authored-by: zouyawei.fe <[email protected]>
Co-authored-by: wxsm <[email protected]>
Co-authored-by: Godpu <[email protected]>

Author: 4 people

src/api/sfc-style.md

@@ -2,12 +2,11 @@
 sidebarDepth: 1
 ---
 
-<!-- TODO: translation -->
-# SFC Style Features
+# 单文件组件样式特性
 
 ## `<style scoped>`
 
-When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:
+当 `<style>` 标签带有 `scoped` attribute 的时候，它的 CSS 只会应用到当前组件的元素上。这类似于 Shadow DOM 中的样式封装。它带有一些注意事项，不过好处是不需要任何的 polyfill。它是通过 PostCSS 转换以下内容来实现的：
 
 ```vue
 <style scoped>
@@ -21,7 +20,7 @@ When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements
 </template>
 ```
 
-Into the following:
+转换为：
 
 ```vue
 <style>
@@ -35,13 +34,13 @@ Into the following:
 </template>
 ```
 
-### Child Component Root Elements
+### 子组件的根元素
 
-With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
+在带有 `scoped` 的时候，父组件的样式将不会泄露到子组件当中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这是有意为之的，这样父组件就可以设置子组件根节点的样式，以达到调整布局的目的。
 
-### Deep Selectors
+### 深度选择器
 
-If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `:deep()` pseudo-class:
+处于 `scoped` 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 `:deep()` 这个伪类：
 
 ```vue
 <style scoped>
@@ -51,7 +50,7 @@ If you want a selector in `scoped` styles to be "deep", i.e. affecting child com
 </style>
 ```
 
-The above will be compiled into:
+上面的代码会被编译成：
 
 ```css
 .a[data-v-f3f3eg9] .b {
@@ -60,12 +59,12 @@ The above will be compiled into:
 ```
 
 :::tip
-DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+通过 `v-html` 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。
 :::
 
-### Slotted Selectors
+### 插槽选择器
 
-By default, scoped styles do not affect contents rendered by `<slot/>`, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:
+默认情况下，作用域样式不会影响到 `<slot/>` 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 `:slotted` 伪类以确切地将插槽内容作为选择器的目标：
 
 ```vue
 <style scoped>
@@ -75,9 +74,9 @@ By default, scoped styles do not affect contents rendered by `<slot/>`, as they
 </style>
 ```
 
-### Global Selectors
+### 全局选择器
 
-If you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):
+如果想让其中一个样式规则应用到全局，比起另外创建一个 `<style>`，可以使用 `:global` 伪类来实现 (看下面的代码)：
 
 ```vue
 <style scoped>
@@ -87,9 +86,9 @@ If you want just one rule to apply globally, you can use the `:global` pseudo-cl
 </style>
 ```
 
-### Mixing Local and Global Styles
+### 混合使用局部与全局样式
 
-You can also include both scoped and non-scoped styles in the same component:
+你也可以在同一个组件中同时包含作用域样式和非作用域样式：
 
 ```vue
 <style>
@@ -101,15 +100,15 @@ You can also include both scoped and non-scoped styles in the same component:
 </style>
 ```
 
-### Scoped Style Tips
+### 作用域样式提示
 
-- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.
+- **作用域样式并没有消除对 CSS 类的需求**。由于浏览器渲染各种各样 CSS 选择器的方式，`p { color: red }` 结合作用域样式使用时会慢很多倍 (即，当与 attribute 选择器组合使用的时候)。如果使用 class 或者 id 来替代，例如 `.example { color: red }`，那你几乎就可以避免这个性能的损失。
 
-- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
+- **小心递归组件中的后代选择器**。对于一个使用了 `.a .b` 选择器的样式规则来说，如果匹配到 `.a` 的元素包含了一个递归的子组件，那么所有的在那个子组件中的 `.b` 都会匹配到这条样式规则。
 
 ## `<style module>`
 
-A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$style`:
+`<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS 类作为 `$style` 对象的键暴露给组件：
 
 ```vue
 <template>
@@ -125,13 +124,13 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
 </style>
 ```
 
-The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
+对生成的类做 hash 计算以避免冲突，实现了和 scope CSS 一样将 CSS 仅作用于当前组件的效果。
 
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
+参考 [CSS Modules 规范](https://github.com/css-modules/css-modules)以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition)。
 
-### Custom Inject Name
+### 自定义注入名称
 
-You can customize the property key of the injected classes object by giving the `module` attribute a value:
+你可以通过给 `module` attribute 一个值来自定义注入的类对象的 property 键：
 
 ```vue
 <template>
@@ -145,21 +144,21 @@ You can customize the property key of the injected classes object by giving the
 </style>
 ```
 
-### Usage with Composition API
+### 与组合式 API 一同使用
 
-The injected classes can be accessed in `setup()` and `<script setup>` via the [`useCssModule`](/api/global-api.html#usecssmodule) API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:
+注入的类可以通过 [`useCssModule`](/api/global-api.html#usecssmodule) API 在 `setup()` 和 `<script setup>` 中使用。对于使用了自定义注入名称的 `<style module>` 模块，`useCssModule` 接收一个对应的 `module` attribute 值作为第一个参数。
 
 ```js
-// default, returns classes for <style module>
+// 默认, 返回 <style module> 中的类
 useCssModule()
 
-// named, returns classes for <style module="classes">
+// 命名, 返回 <style module="classes"> 中的类
 useCssModule('classes')
 ```
 
-## State-Driven Dynamic CSS
+## 状态驱动的动态 CSS
 
-SFC `<style>` tags support linking CSS values to dynamic component state using the `v-bind` CSS function:
+单文件组件的 `<style>` 标签可以通过 `v-bind` 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：
 
 ```vue
 <template>
@@ -183,7 +182,7 @@ export default {
 </style>
 ```
 
-The syntax works with [`<script setup>`](./sfc-script-setup), and supports JavaScript expressions (must be wrapped in quotes):
+这个语法同样也适用于 [`<script setup>`](./sfc-script-setup)，且支持 JavaScript 表达式 (需要用引号包裹起来)
 
 ```vue
 <script setup>
@@ -203,4 +202,4 @@ p {
 </style>
 ```
 
-The actual value will be compiled into a hashed CSS custom property, so the CSS is still static. The custom property will be applied to the component's root element via inline styles and reactively updated if the source value changes.
+实际的值会被编译成 hash 的 CSS 自定义 property，CSS 本身仍然是静态的。自定义 property 会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式更新。