Question

<div id="container">
    <div class="element"></div> <!-- remove left margin -->
    <div class="element"></div>
    <div class="element"></div> <!-- remove right margin -->
    <div class="element"></div> <!-- remove left margin -->
    <div class="element"></div>
    <div class="element"></div> <!-- remove right margin -->
    <div class="element"></div> <!-- remove left margin -->
</div>

元素数量需要变量，但连续3个。

Answer 1

您正在寻找的是:nth-child()-Slector。有了它，你可以，例如假设每个第三个元素都需要删除左边距。

Your example on JSFiddle.

/* remove margin-right from every third child */
.element:nth-child(3n) {
  margin-right: 0;
}

Answer 2

.test{
  display:flex;
  justify-content: space-between;
  margin-left:0px;
  margin-right:0px;
}
.element:nth-child(1) {
    margin-left:0px; 
}
.element:nth-child(3) {
    margin-right:0px; 
}
.element{
  height:50px;
  width:150px;
  background-color:pink;
  border: 2px solid black;
}

<div id="container">
 <div class="test">
    <div class="element"></div> <!-- remove left margin -->
    <div class="element"></div>
    <div class="element"></div> <!-- remove right margin -->
    </div>
 <div class="test">
    <div class="element"></div> <!-- remove left margin -->
    <div class="element"></div>
    <div class="element"></div> <!-- remove right margin -->
    </div>
  <div class="test">
    <div class="element"></div> <!-- remove left margin -->
    </div>
</div>

从第一个元素中删除左边距，从3个元素中删除右边距

2 个答案: