如何将 CSS 网格属性应用于深度嵌套元素？

网格上下文和嵌套元素

在 CSS 网格中，网格属性仅限于父子关系中的元素。这限制了网格属性对网格容器直接子元素的适用性。

嵌套网格示例

考虑一个场景，您尝试定位深度嵌套的网格使用应用于表示网格容器的顶级 ul 的网格属性的 li 元素：

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

在此示例中， li.orgChartLevel2b 元素是 ul.orgChartLevel1 的后代，但它不是直接子元素。因此，ul.orgChartLevel1 上定义的网格属性不适用于 li.orgChartLevel2b。

解决方案：建立父子关系

将网格属性应用于深度嵌套元素，您需要在要设置样式的元素和网格容器之间建立父子关系。这可以通过以下任一方式完成：

• 将 display: grid 或 display: inline-grid 应用到网格容器和所需元素之间的父元素。
• 删除任何中间的包装元素阻止父子关系。

网格内网格容器的注意事项项目

需要注意的是，网格项目本身可以是网格容器。在这种情况下，网格布局属性适用于定义为网格容器的网格项的范围内。

以上是如何将 CSS 网格属性应用于深度嵌套元素？的详细内容。更多信息请关注PHP中文网其他相关文章！