如何在不使用'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中文网其他相关文章！