Question

我正在使用CSS网格，但是遇到了一个奇怪的问题。

如下面的代码所示。我有一个父网格homepage__section__medical-types__content，它声明了

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

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

homepage__heading__info:first-child

和

homepage__heading__info:nth-child(2)

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

body {
  margin: 0;
  display: flex;
  justify-content: center;
}

.container {
  background-color: lavenderblush;
  height: auto;
  width: 320px;
}

.homepage__section__medical-types {
  display: grid;
  grid-template-areas: ". medic .";
  grid-template-columns: 48px 1fr 16px;
}

.homepage__section__medical-types__content {
  grid-area: medic;
  display: grid;
  grid-template-areas:
		"blue"
		"content1"
		"green"
		"content2";
  grid-template-rows: 250px 1fr 250px 1fr;
}

.homepage__heading-box {
  height: 100%;
  border-radius: 25px;
}

.homepage__heading-box--blue {
  grid-area: blue;
  background-image: linear-gradient(to bottom, #669DD6, #ADDAF1);
}

.homepage__heading-box--green {
  grid-area: green;
  background-image: linear-gradient(to bottom, #51CEA2, #97DCC6);
}

.homepage__heading__info {
  background-color: aliceblue;
}

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

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

<div class="container">
  <div class="homepage__section__medical-types">
    <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>
  </div>
</div>

编辑：我注意到，仅注释掉grid-area: content1;和grid-area: content2;，但保持父网格模板区域不变，相应的元素将以正确的顺序显示。我比以前更困惑。

Answer 1

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

要清楚，这是您的HTML：

    fun <T> base_delayed_progress_observable(source: Observable<T>): Observable<T>
    {
        val timer = Observable.interval(100, TimeUnit.MILLISECONDS) //Creates observable that will emit Long++ each 100 miliseconds
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .doOnNext(
                    {
                        if (it == 10L)//Here we check current timer value. For example here i check if it is 1 second gone (100 miliseconds * 10 = 1 second)
                        {
                            //here we put all we need to show progress/spinner an so on
                        }
                    })

        return Observable.zip(source, timer,
            BiFunction<T, Long, T> { t1, t2 ->
                //Here we return our original Obervable zipped with timer
                //Timer will be cancelled when our source Observable gets to OnComplete
                return@BiFunction t1
            }).doFinally(
            {
                //Here we can dismiss all progress dilogs/spinner
            })
    }

这是您的CSS：

<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__heading__info:first-child { grid-area: content1; } .homepage__heading__info:nth-child(2) { grid-area: content2; color: red }适用于所有兄弟姐妹中的第一个孩子。 :first-child从来不是兄弟姐妹中的第一个孩子。因此，在应用.homepage__heading__info时，它将被忽略。如果您在开发工具中搜索此选择器，则该选择器甚至不会出现，因为它的目标不存在。

对于:first-child，这实际上适用于所有兄弟姐妹中的第二个孩子，恰好是第一个.homepage__heading__info:nth-child(2)（文本为“ 1”的项目）。选择器将网格区域“ content2”应用于此元素，并根据.homepage__heading__info将其发送到底部。

grid-template-areas

带有文本“ 2”的元素会自动放置在空的行中，该行恰好是第2行（同样，grid-template-areas: "blue" "content1" "green" "content2"不存在）。结果，2在1之前。

编辑：我注意到，仅注释掉content1和grid-area: content1但父grid-area: content2不变，相应的元素以正确的顺序显示。我比以前更困惑。

在没有网格区域的情况下，算法会按grid-template-area放置指定的项目（在这种情况下，将仅是“ blue”和“ green”），其余的项目将自动放置到源代码中的现有行中订单。

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

1 个答案: