nth-child（2）不选择元素

Question

我正在尝试创建一个网格，其中节标题占据第一行的三列，而三个不同的块占据第二行，每个占一列。我已成功通过nth-child选择了第二个和第三个功能块，但无法选择第一个功能块（背景色不适用于第一列）。有什么我想念的吗？

我尝试给每个人提供一个ID，以便通过CSS进行选择，并且可以正常工作。但是我试图弄清楚为什么nth-child选择器在这里不起作用。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-section .header-block {
  grid-row: 1;
  grid-column: 1/4;
  text-align: center;
  background-color: #555;
}

.feature-block {
  grid-row: 2;
}

.grid .feature-block:nth-child(1) {
  grid-row: 2;
  grid-column: 1/2;
  color: blue;
}

.grid .feature-block:nth-child(2) {
  grid-row: 2;
  grid-column: 2/3;
  background-color: orange;
}

.grid .feature-block:nth-child(3) {
  grid-row: 2;
  grid-column: 3/4;
  background-color: red;
}

<section class="grid-section">
  <div class="grid">
    <div class="header-block">
      <h1>Uncanny Valley</h1>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images In aesthetics.
      </p>
    </div>
  </div>
</section>

Answer 1

那你想要什么？

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-section .header-block {
  grid-row: 1;
  grid-column: 1/4;
  text-align: center;
  background-color: #555;
}

.feature-block {
  grid-row: 2;
}

.grid .feature-block:nth-child(2) {
  grid-row: 2;
  grid-column: 1/2;
  color: blue;
}

.grid .feature-block:nth-child(3) {
  grid-row: 2;
  grid-column: 2/3;
  background-color: orange;
}

.grid .feature-block:nth-child(4) {
  grid-row: 2;
  grid-column: 3/4;
  background-color: red;
}

<section class="grid-section">
  <div class="grid">
    <div class="header-block">
      <h1>Uncanny Valley</h1>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images
        In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images
        In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images
        In aesthetics.
      </p>
    </div>
    <div class="feature-block">
      <div class="feature-image"></div>
      <h2>Mori's Hypothesis</h2>
      <p class="copy">
        An empirically estimated uncanny valley for static robot face images
        In aesthetics.
      </p>
    </div>
  </div>
</section>