html - 为什么我的 css 没有应用于我的下一个 div？

Question

有人能告诉我为什么我可以设置标题类的样式而不是 MainContent 类的样式吗？仅显示 Lorum Ipsum 文本。 maincontent div 不显示任何宽度、高度或颜色。感谢您的帮助!

.header {
    width: 100%;
    height: 90px;
    background-color: blue;
}

.header img {
 height: 80%;
 margin-top: 10px;
 margin-left: 260px;
}

.MainContent {
    width: 100%;
    height: 80%;
    background-color: yellow;
}

<div class="header">
	<img src="img/epic_it.png" alt="epicit logo">
	<nav></nav>
</div>

<div class="MainContent">
	<h1>
	Lorem ipsum
	</h1>
</div>

Answer 1

在 .header img 声明的末尾有一段非常奇怪的标记，它被认为是 CodeMirror 无效字符，并导致后面的任何 CSS它打破。如果您编辑代码段，您会在那里看到一个红色圆圈，尽管它在代码段预览中是不可见的。

只需删除即可解决问题:

.header {
  width: 100%;
  height: 90px;
  background-color: blue;
}

.header img {
  height: 80%;
  margin-top: 10px;
  margin-left: 260px;
}

.MainContent {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

<div class="header">
  <img src="img/epic_it.png" alt="epicit logo">
</div>

<div class="MainContent">
  <h1>
    Lorem ipsum
  </h1>
</div>

希望对您有所帮助! :)