能否使用CSS选择器选中Grid布局中的空网格区域？

不可以直接通过CSS选择器选中grid-template-areas中以.标识的空网格区域。

grid-template-areas语法中的.只是布局层面的占位标记，作用是声明对应位置的网格单元格不属于任何具名网格区域，它本身不会生成任何真实DOM节点，也没有对应的伪类、伪元素选择器可供匹配。
CSS选择器的匹配目标只能是DOM树中实际存在的元素，或是规范明确定义的元素伪元素、伪类状态，没有对应DOM实体的空网格单元格自然无法被直接选中、设置样式。

你给出的示例代码如下：

.grid {
  display: grid;
  grid-template: repeat(4, 80px) / repeat(4, 80px);
  justify-content: center;
  grid-template-areas: "a0 . a2 ." "b0 . b2 ." "c0 . c2 ." "d0 . d2 .";
}

这个4行4列的网格中，第2列、第4列的所有单元格都是.标记的空区域，这些位置没有绑定任何网格子项，无法直接通过选择器为其添加边框、背景、交互效果。

• 占位元素填充法
  在网格容器中添加对应数量的无语义空标签（如<div>），通过grid-area或行列定位属性将这些空标签放置到原本的空单元格位置，之后就可以像选中普通DOM元素一样，给这些占位元素设置任意样式。
• 容器背景模拟法
  如果不需要给空区域绑定点击、hover等交互，仅需要实现视觉样式，可以直接给网格容器设置渐变背景，通过background-size、background-position精准对齐空单元格的尺寸和位置，不需要额外添加DOM节点就能模拟出空区域的样式效果。
• 间隙属性快速实现分隔效果
  如果空区域的作用只是做内容块之间的分隔，直接使用row-gap、column-gap设置网格间距即可：将网格容器的背景设置为分隔区需要的颜色，再给所有网格子项设置内容区的背景色，就能快速实现间隔区域的视觉效果，开发成本最低。

注意：空网格单元格虽然无法被选中，但依然参与网格布局的流排布，自动放置的网格子项默认会按顺序填充这些空位置，如果你需要让内容避开这些区域，需要手动给对应子项设置grid-area指定放置位置。

内容的提问来源于stack exchange，提问作者Hai Na Zheng