使用生成的内容和 CSS 网格布局设置空单元格的样式

Desknumber

有没有想过如何在不添加多余的空元素的情况下实现空网格单元的样式？那么，CSS 生成的内容可以帮助您做到这一点。一个常见的网格布局问题是，当布局方法的新手想知道如何设置不包含任何内容的网格单元格的样式时。在当前的 1 级规范中，这是不可能的，因为无法定位空网格单元或网格区域并应用样式。这意味着要应用样式，您需要插入一个元素。在本文中，我将了解如何使用 CSS 生成的内容来实现空单元格的样式，而不添加多余的空元素，并展示一些使用该技术的用例。

这里的关键词是“网格容器的子级”。该规范定义了在 电子邮件营销列表 父元素上创建网格，子项可以放置在该网格中。它没有定义该网格的任何样式，甚至没有实现像column-rule我们在多列布局中拥有的属性之类的东西。我们设置子项的样式，而不是网格本身，这使得我们需要某种元素来应用该样式。



插入样式的一种方法是在文档中插入冗余元素，例如 span 或 div。开发人员往往不喜欢这个想法，尽管事实上他们多年来一直在添加额外的冗余“行包装器”，以便使用浮动实现网格布局。也许那个明显的空元素比包装元素中有些隐藏的冗余更令人反感！

插入额外的几个div或b多个元素不太可能是对良好标记所犯下的最大罪行，因此如果需要的话，我不会因为选择这种方法而失眠。Web 开发通常涉及选择最不次优的方法来完成工作，直到设计出更好的解决方案。不过，如果可能的话，我确实更喜欢将样式保留在一个位置，安全地保存在样式表中。如果不出意外的话，它可以更轻松地重用样式，而无需担心额外的所需标记。正是出于这个原因，我倾向于关注生成的内容，这是我在使用CSS 格式化书籍的工作中非常熟悉的，您大部分时间都花在使用此功能上。