html - 为什么使用具有相同类但不同选择器的网格区域以相反顺序显示的网格模板区域？

Question

<分区>

Answer 1

您误解了 nth-child() 的目的伪类。

明确地说，这是您的 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>

这是您的 CSS:

.homepage__heading__info:first-child {
   grid-area: content1;
}

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

因此，:first-child 适用于所有 sibling 中的第一个 child 。 .homepage__heading__info 永远不是所有 sibling 中的第一个 child 。所以在应用 :first-child 时，它会被忽略。如果您在开发工具中搜索此选择器，它甚至不会出现，因为它的目标不存在。

对于 .homepage__heading__info:nth-child(2)，这实际上适用于所有 sibling 中的第二个 child ，恰好是第一个 .homepage__heading__info(元素带有文本“1”)。根据 grid-template-areas，选择器将网格区域“content2”应用于此元素，并将其发送到底部。

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

带有文本“2”的元素被自动放置在未占用的行中，恰好是第 2 行(同样，content1 不存在)。结果，2 在 1 之前。

---

EDIT: I have noticed that just commenting out grid-area: content1 and grid-area: content2 but keeping the same the parent grid-template-area, the corresponding elements are displayed in the correct order. I am more confused then before.

如果没有网格区域，算法会将指定元素放置在每个 grid-template-areas 中(在这种情况下，只会是“蓝色”和“绿色”)，其余元素是自动的-按源顺序放入现有行。