如何將 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中文網其他相關文章！