可以使用CSS:nth-​​child(或类似)来选择HTML中的批量元素,例如每隔4个节点吗？

Question

背景:我正在尝试实现一种布局,其中元素在一行中从左向右流动,然后在下一行从右向左流动,依此类推......我在CodePen中模拟了一些东西,看看这里(它解释得比我好!)

我已经实现了上面的例子,nth-child但它是'硬编码的',例如

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  ...
  <li>16</li>
</ul>

CSS:

li { float: left; }

li:nth-child(5),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8) {
  float: right;
}

现在,这可行,但它显然仅限于特定数量的元素(我放入CSS中的数量!).我知道我可以做到:nth-child(4n)每个第四个元素,但我希望能够选择那个和下一个4.它几乎就像nth-child(odd),但是对于4个元素的组.

有没有办法以编程方式执行此操作？我看过调整数量查询(http://alistapart.com/article/quantity-queries-for-css),但这似乎不是我追求的......

任何帮助非常感谢!!

Answer 1

是的,您可以使用nth-child下面代码段中的一组选择器来根据模式选择重复的元素组.

有一点需要注意的是,选择每个第4个元素和接下来的4个元素相当于选择第4个元素之后的所有元素,因此我将样本限制为仅接下来的2个元素.

选择器的说明(选择第4,第5,第8,第9个元素等):

• nth-child(4n+4) - 选择第4(4*0 + 4),第8(4*1 + 4),第12(4*2 +4)个元素
• nth-child(4n+5) - 选择第5(4*0 + 5),第9(4*1 + 5),第13(4*2 + 5)个元素.

从解释中可以看出,该系列从第4个元素开始,然后重复.如果您需要从第一个元素(比如第一,第二,第五,第六等)开始,那么您可以使用选择器组作为div:nth-child(4n+1), div:nth-child(4n+2).

div:nth-child(4n+4), div:nth-child(4n+5){
  color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>

选择器的说明(选择第4,第5,第12,第13个元素等):

• nth-child(8n+4) - 选择第4(8*0 + 4),第12(8*1 + 4),第20(8*2 +4)个元素
• nth-child(8n+5) - 选择第5(8*0 + 5),第13(8*1 + 5),第21(8*2 + 5)个元素.

从解释中可以看出,该系列从第4个元素开始,然后重复.如果您需要从第一个元素(比如第一,第二,第五,第六等)开始,那么您可以使用选择器组作为div:nth-child(4n+1), div:nth-child(4n+2).

div:nth-child(8n+4), div:nth-child(8n+5){
  color: red;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>