如何在不使用「nth-child」的情況下選擇性地設定特定 CSS 網格單元的樣式？

如何在CSS 中定位特定網格單元

選擇沒有網格子級的行和列

在CSS 網格佈局中，第n 個子級選擇器執行下列操作不足以選擇特定儲存格，因為內容可以動態放置在儲存格內。但是，您可以使用帶有 display:contents 的包裝元素來獲得所需的行為。

考慮以下場景：

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  background: #999;
}

要選擇第二列中的所有元素，請將它們括在帶有顯示內容的包裝器。這允許您共同設定第二列中的儲存格的樣式。

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-container {
  display: contents;
  grid-column: 2;
}

.grid-item {
  background: #999;
}

這種方法可確保包裝元素的行為就像它們是網格容器的直接子元素一樣，從而允許您相應地應用樣式。

以上是如何在不使用「nth-child」的情況下選擇性地設定特定 CSS 網格單元的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！