CSS特性如何在这个例子中起作用？

Question

所以我有这个HTML

<h2 style="background: orange"> Inline rule style </h2>
<h2 id="header-1"> Identity Style </h2>
<h2 class="headers"> Class Style </h2>
<h2> Element Style </h2>

和这个CSS：

#header-1 {background: red};
h2#header-1 {background: maroon};
body h2#header-1 {background: fuchsia};
.headers {background: green};
h2.headers {background: olive};
body h2.headers {background: lime};
h2 {background: blue};
body h2 {background: aqua};

有人可以向我解释为什么班级“标题”不会​​显示为绿色吗？什么实际覆盖它，在运行此示例时没有为其分配颜色？

https://jsfiddle.net/kuojzos5/2/

Answer 1

问题是外面的分号。如果你移动分号，那么背景将是石灰，因为身体h2.headers比.headers更具体，之后就会出现。

Answer 2

<强>问题：

你在css类之外使用分号它必须在css属性中使用分类

更正（https://jsfiddle.net/kuojzos5/3/）：

#header-1 {background: red;}
h2#header-1 {background: maroon;}
body h2#header-1 {background: fuchsia;}
.headers {background: green;}
h2.headers {background: olive;}
body h2.headers {background: lime;}
h2 {background: blue;}
body h2 {background: aqua;}

Answer 3

类可以根据需要使用多次，但是当您添加id时，颜色会出现在id标记中。所以当你想要绿色时只需改变你的第一行。 我总是在上课前。

header-1 {background：green};