---
id: 612e89d254fe5d3df7d6693d
title: 步骤 10
challengeType: 0
dashedName: step-10
---

# --description--

现在你已经重置了 `html` 框模型，你还需要将其传递给其中的元素。 为此，你可以将 `box-sizing` 属性设置为 `inherit`，这将告诉目标元素使用与父元素相同的值。

你还需要定位伪元素，它们是跟随选择器的特殊关键字。 你将使用的两个伪元素是 `::before` 和 `::after` 伪元素。

`::before` 选择器创建一个伪元素，它是被选元素的第一个子元素，而 `::after` 选择器创建一个伪元素，它是最后一个子元素的选定元素。 这些伪元素通常用于创建装饰性内容，你将在本项目后面看到。

现在，创建一个 CSS 选择器以使用 `*` 定位所有元素，并使用 `::before` 和 `::after` 包含伪元素。 将 `box-sizing` 属性设置为 `inherit`。

# --hints--

应该有一个 `*, ::before, ::after` 选择器。

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
```

`*, ::before, ::after` 选择器应该将 `box-sizing` 属性设置为 `inherit`。

```js
assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Piano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div id="piano">
      <div class="keys">
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>

        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
        <div class="key black--key"></div>
      </div>
    </div>
  </body>
</html>
```

```css
--fcc-editable-region--
html {
  box-sizing: border-box;
}
--fcc-editable-region--
```
