nth-child选择器二乘二除外

Posted 2021-04-18

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

1,2,3,4,5,6,7,8,9,10,10,10,10,10,10,10，

但这只是迫使第n个孩子在排除第一个孩子之后开始。

1 - 70％，2 - 30％，3 - 30％，4 - 70％，5 - 70％，6 - 30％，7 - 30％，等......

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

答案

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

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

我不清楚的一件事是你正在尝试用第一个块做什么。您可以通过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>

另一答案

我已经采取了显示：flex方法，基本上使用该命令将项目移动到需要的左侧，请参阅下面的代码段：

.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选择器二乘二除外的主要内容，如果未能解决你的问题，请参考以下文章

选择 TD 元素，这些父 TR 中的元素除外

利用 SASS 简化 `nth-child` 样式的生成

jQuery nth-child 选择器问题

jQuery-过滤选择器二

jQuery学习笔记使用选择器二

CSS3 伪类选择器 :nth-child()