Question

我有一个结构如：

<div class='container'>
    <div class='half-screen'></div>
    <div class='half-screen'></div>
    <div class='half-screen'></div>
    <div class='half-screen'></div>
</div>

我必须动态添加div，并且我想知道是否有动态创建关系的方法，以便在每个具有半屏类的两个div之前插入一个条，即每2n +之前1 div.half-screen。

在每个半屏幕上可能还有其他方法可以重组并使用css作为顶部边框，但我很想知道我是否可以使用+ css邻近运算符来解决这个问题

 .container {
  &.half-screen + .half-screen + .half-screen {

    &:before {
      border-top: 1px solid #ccc;
      display:block;
    }
  }
}

Answer 1

不，你不能。

我知道您认为.a + .a + .a将第三个元素与a类匹配，但请记住，它还会将第四个元素与a类匹配。 CSS并没有真正说“哦，我们已经将这个元素用于这个选择器，我们不会再使用它了。”

Answer 2

我认为你在2n + 1和之前的正确轨道：之前，只是错过了几个步骤，除非我误解。这是你想要实现的目标吗？

＆＃13;

.half-screen:nth-child(2n+1):before {
  content: '';
  width: 100%;
  margin: 10px 0;
  height: 1px;
  background: black;
  display: block;
}

＆＃13;

<div class='container'>
    <div class='half-screen'>1</div>
    <div class='half-screen'>2</div>
    <div class='half-screen'>3</div>
    <div class='half-screen'>4</div>
    <div class='half-screen'>5</div>
    <div class='half-screen'>6</div>  
</div>

＆＃13;

CSS - 在插入每个第n个相邻元素之前重复一次

2 个答案: