网格 CSS 选择器答案

【问题标题】：Grid css selector网格 CSS 选择器
【发布时间】：2020-07-01 08:51:43
【问题描述】：

我有一个每行 3 个项目的网格。而且我需要在项目之间有线条......我一直在努力使用 :nth 选择器，但我无法让它以正确的方式工作。

也许有人可以帮我解决这个问题？

查看图片，了解我需要什么。

【问题讨论】：

相关stackoverflow.com/q/56012789/8620333

标签： css css-selectors

【解决方案1】：

你可以：

使用 CSS 网格制作网格
使用::after在每个框后添加一行
使用::nth-child(3n) 使用display:none 为每个第三个框（行中的最后一个框）隐藏此::after 行

我在这里写了一个小例子： https://codepen.io/annaazzam/pen/xxZPpXg

【讨论】：

【解决方案2】：

您可以针对除最后一行之外的每个项目并使用 ::pseudo-element 来实现它

.row {
  display: flex;
}

.item {
  width: 33.3%;
  height: 100px;
  padding: 6rem;
  margin: 1rem;
  background-color: #777;
  position: relative;
}

.item:not(:nth-child(3n))::after{
  display: block;
  content: "";
  position: absolute;
  height: 100%;
  width: 2px;
  right: -1rem;
  top: 0;
  border-right: 1px solid blue;
}

<div class="grid">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

【讨论】：

【解决方案3】：

试试这个。

hr{
  /and add some width and height and border to this /
}

   <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
     <hr>
    <div class="col-sm">
      One of three columns
    </div>
    <hr>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

【讨论】：