在页面上的任何CSS网格项周围绘制边框

Question

我正在一个使用CSS网格的网站上工作。有时候调试它们可能有点棘手。我知道大多数浏览器允许您检查代码以确定问题，但我想简单地突出显示网格行，因为可视化调试要比使用检查器进行调试容易得多。

我目前使用的代码如下：

.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;

代码在网格容器周围绘制红色边框，并显示网格的类名。这很好，但不幸的是，它也对网格中包含的任何内容都做了同样的事情，比如文本、引用、图像等等。

我希望代码只在CSS网格周围画一个红色的框，并显示它们的类名。看看堆栈溢出，我能找到的最好的选择就是文章Border around CSS Grid item div。不幸的是，这只是硬编码一个特定的网格。

有没有一种方法(CSS媒体查询)？JS？还有别的事吗？)只标识任何网格项并使用边框显示它们并显示类名？

Answer 1

您正在使用后代选择器。因为您只想将网格容器的子对象作为目标，所以需要使用子选择器>。

.grid-container>* { }
.grid-container>*::after {}