nth-child 两个选择器，不包括第一个

Question

我正在使用 Craft CMS，它通过一个重复显示我所有的项目 div。我需要每两个 div 是一个宽度，接下来的两个是另一个宽度，但要排除第一个 div。我试过了：

4n, 4n-1, 4n-2, 4n-3 & :first-child

但这只是强制 nth-child 在先排除 child 之后开始。

第一 - 70%, 第二 - 30%，第三 - 30%，第四 - 70%, 第五 - 70%, 第六 - 30%, 第七 - 30%，以此类推...

我尝试存档的效果显示在附图中。如果有更好的方法，请告诉我。

Answer 1

你走在正确的轨道上，但我建议使用 4n+1 而不是 4n-1 这样的计数器来保持简单。

在这个例子中，我不得不从宽度中减去一些 space 来计算块之间的边距。不过，我相信你可以按照你需要的方式工作。

我不清楚的一件事是您究竟想对第一个块做什么。您可以使用 4n+2 到 4n+5 从范围中排除第一个块，但我不知道您希望它以何种方式真正不同。

html, body {
  margin:0;
}

.item {
  display:inline-block;
  background:#ccc;
  padding:2em;
  margin:10px;
  box-sizing: border-box;
}

.item:nth-child(4n+1) {
   width:calc(70% - 24px)
}

.item:nth-child(4n+2), .item:nth-child(4n+3) {
   width:calc(30% - 24px)
}

.item:nth-child(4n+4) {
   width:calc(70% - 24px)
}

<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>

Answer 2

我采用了 display:flex 方法，基本上使用 order 在需要时将项目向左移动，请参见下面的代码片段：

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.inner-contaner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}
.inner-contaner .item {
  background-color: steelblue;
  color: white;
  font-weight: bold;
  font-family: monospace;
  padding: 2em;
  margin: 0.5em;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 70%;
          flex: 1 1 70%;
}
.inner-contaner .item:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30%;
          flex: 1 1 30%;
  background-color: tomato;
}
.inner-contaner:nth-child(even) .item:last-child {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

<div class="flex-container">
    <div class="inner-contaner">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 3</div>
        <div class="item">item 4</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 5</div>
        <div class="item">item 6</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 7</div>
        <div class="item">item 8</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 9</div>
        <div class="item">item 10</div>
    </div>
    <div class="inner-contaner">
        <div class="item">item 11</div>
        <div class="item">item 12</div>
    </div>
</div>

nth-child 两个选择器，不包括第一个

nth-child selector two by two excluding first

css-selectors

content-management-system