这就是adjacent sibling selector的用处所在。
顺便说一句，您的HTML代码中有一些错误：

• class和等号之间不能有空格
• 记住关闭标记，因为您的main标记未关闭

下面是您使用的相邻同级选择器的示例：

main {
  background: lightgrey;
  padding: 2em;
}

.about {
  border: 1px solid red;
}

/* 
 * Adjacent sibling selector to add a top margin to any
 * element with .about which follows another .about
 */ 
.about + .about {
  margin-block-start: 1em;
}

<div class="main-container">
  <main>
   <div class="about about--dogs">Lorem</div>
   <div class="about about--cats">Ipsum</div>
  </main>
</div>

这对于设置排版元素的间距也非常有用，例如段落跟在另一个段落或标题之后。
你也可以使用CSS grid或flex，结合gap属性来完成这个操作。
一个二个一个一个

一个现代的解决方案是使用Flexbox，它对所有可能的情况都是冗余的。将flex-direction更改为column以保持正常的块级行为。您可以使用gap属性分隔Flexbox中的元素。

main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* for visualization only */
main > div {
  border: 2px dashed red;
}

<div class="MainContainer">
  <main>
    <div class="AboutDogs">About Dogs</div>
    <div class="AboutCats">About Cats</div>
  </main>
</div>

另一种方法是使用:nth-child()选择器。使用n+2可以选择从第二个元素开始的所有子元素。
一个二个一个一个