> For the complete documentation index, see [llms.txt](https://iexam.gitbook.io/fcc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iexam.gitbook.io/fcc/ji-chu/override-class-declarations-with-inline-styles.md).

# Override Class Declarations with Inline Styles

说明：

```
我们证明了无论在 style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

还有其他覆盖 CSS 的方法。你还记得行内样式吗？

试着用 in-line style（行内样式） 使 h1 元素变为白色。记住，行内样式看起来是这样的：

<h1 style="color: green">

保留 h1 元素中的 blue-text 和 pink-text 两个 class。
```

原始代码：

```
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
```

调试代码：

```
<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 style="color:white" class="pink-text blue-text">Hello World!</h1>
```