Html 为什么将网格模板区域与同一类但不同选择器的网格区域按相反顺序显示？

我正在使用css网格，我遇到了一个奇怪的问题

正如您在下面的代码中所看到的。我有一个父网格，

homepage\u section\u medical-types\u content

，它声明

grid-template-areas:
    "blue"
    "content1"
    "green"
    "content2";

四排。content1和content2分别分配给：

homepage__heading__info:first-child

及

但为什么它们在声明时以相反的顺序显示？我做错了什么

正文{
保证金：0；
显示器：flex；
证明内容：中心；
}
.集装箱{
背景色：薰衣草色；
高度：自动；
宽度：320px；
}
.主页\uuuu部分\uuuu医疗类型{
显示：网格；
网格模板区域：“.medic.”；
网格模板列：48px 1fr 16px；
}
.主页\部分\医疗类型\内容{
网格区域：medic；
显示：网格；
网格模板区域：
“蓝色”
“内容1”
“绿色”
“内容2”；
网格模板行：250px 1fr 250px 1fr；
}
.主页标题框{
身高：100%；
边界半径：25px；
}
.主页标题框-蓝色{
网格区域：蓝色；
背景图像：线性渐变（至底部，#669DD6，#ADDAF1）；
}
.homepage\uuuu标题框--绿色{
网格区域：绿色；
背景图像：线性渐变（至底部，#51CEA2，#97DCC6）；
}
.主页\标题\信息{
背景色：aliceblue；
}
.主页\标题\信息：第一个孩子{
网格区域：content1；
}
.主页\标题\信息：第n个孩子（2）{
网格区域：content2；
颜色：红色
}

一,

二,

您误解了伪类的用途

明确地说，这是您的HTML：

<div class="homepage__section__medical-types__content">
   <div class="homepage__heading-box homepage__heading-box--blue"></div>
   <div class="homepage__heading__info"><p>1</p></div>
   <div class="homepage__heading-box homepage__heading-box--green"></div>
   <div class="homepage__heading__info"><p>2</p></div>
</div>

因此，

：第一个孩子

适用于所有兄弟姐妹中的第一个孩子

.homepage\uuuuu heading\uuuu info

从来不是所有兄弟姐妹中的第一个孩子。因此，如果应用了

：第一个子项，它将被忽略。如果在开发工具中搜索此选择器，它甚至不会出现，因为其目标不存在

对于
.homepage\uuuuu heading\uuu info:nth child（2）
，这实际上适用于所有兄弟姐妹中的第二个孩子，它恰好是第一个
.homepage\uuuu heading\uu info
（带有文本“1”的项目）。选择器将网格区域“content2”应用于此元素，并根据
网格模板区域
将其发送到底部

grid-template-areas:
   "blue"
   "content1"
   "green"
   "content2"

文本为“2”的元素自动放置在未占用的行中，该行恰好是第2行（同样，
content1
不存在）。因此，2先于1


编辑：我注意到，仅注释出
网格区域：content1
和
网格区域：content2
，但保持父
网格模板区域的相同，相应的元素以正确的顺序显示。我比以前更困惑了

如果没有网格区域，算法会按照
网格模板区域
放置指定的项目（在这种情况下，只有“蓝色”和“绿色”），剩余的项目会自动按源代码顺序放置到现有行中。
Omg，我觉得太傻了。当然，问题在于第n个子选择器的误用。我在一杯水里迷了路！谢谢你的详细回答；我已将其标记为已接受！只是一个问题：如果我使用：nth类型，它不是一个真正的替代解决方案，对吗第n种类型只对元素有效，而不对类有效，对吗？是的，你是对的。如果将类为
homepage\uuuu heading\uuu info
的元素切换为它们自己的唯一元素类型，则可以使用
：nth-of-type（）
。
.homepage__heading__info:first-child {
   grid-area: content1;
}

.homepage__heading__info:nth-child(2) {
   grid-area: content2;
   color: red
}

grid-template-areas:
   "blue"
   "content1"
   "green"
   "content2"