结合CSS nth-child函数

Question

这是我的DOM.我需要选择中间列三次,跳过一个节点,重复:

+-------------------+  <div class="grid">
| +---+ +---+ +---+ |    <div class="cell">1</div>
| | 1 | | 2 | | 3 | |    <div class="cell">2</div>
| +---+ +---+ +---+ |    <div class="cell">3</div>
| +---+ +---+ +---+ |    <div class="cell">4</div>
| | 4 | | 5 | | 6 | |    <div class="cell">5</div>
| +---+ +---+ +---+ |    <div class="cell">6</div>
| +---+ +---+ +---+ |    <div class="cell">7</div>
| | 7 | | 8 | | 9 | |    <div class="cell">8</div>
| +---+ +---+ +---+ |    <div class="cell">9</div>
| +---------------+ |
| |    AD UNIT    | |    <div class="adUnit"></div>
| +---------------+ |
| +---+ +---+ +---+ |    <div class="cell">11</div>
| | 11| |12 | |13 | |    <div class="cell">12</div>
| +---+ +---+ +---+ |    <div class="cell">13</div>
| +---+ +---+ +---+ |    <div class="cell">14</div>
| |14 | |15 | |16 | |    <div class="cell">15</div>
| +---+ +---+ +---+ |    <div class="cell">16</div>
| +---+ +---+ +---+ |    <div class="cell">17</div>
| |17 | |18 | |19 | |    <div class="cell">18</div>
| +---+ +---+ +---+ |    <div class="cell">19</div>
| +---------------+ |
| |    AD UNIT    | |    <div class="adUnit"></div>
| +---------------+ |
| +---+ +---+ +---+ |    <div class="cell">21</div>
| |21 | |22 | |23 | |    <div class="cell">22</div>
| +---+ +---+ +---+ |    <div class="cell">23</div>
| +---+ +---+ +---+ |    <div class="cell">24</div>
| |24 | |25 | |...| |    <div class="cell">25</div>
| +---------------+ |    <!-- ... -->
+-------------------+  </div>

tldr

我需要选择以下[子节点]序列:

 2,  5,  8,
12, 15, 18,
22, 25, 28,
32, 35, 38, ...

我用三个独立的nth-child函数实现了这个目的:

• .grid .cell:nth-child(10n + 2) (2,12,22,32 ......)
• .grid .cell:nth-child(10n + 5) (5,15,25,35 ......)
• .grid .cell:nth-child(10n + 8) (8,18,28,38,......)

题:

这三个功能可以重写成一个吗？

Answer 1

事实证明,没有办法使用nth-child或nth-of-type来做你正在做的事情,因为nth-of-type会查看你选择的元素类型,而不是类.

如果您可以更改广告单元的元素类型,则可以使用nth-of-type,例如:

<div class="cell">1</div>
<aside class="adUnit"></aside>
<div class="cell">2</div>

如果您可以进行更改,那么nth-of-type应该允许您定位div而不是旁边,例如:

.grid > div.cell:nth-of-type(3n+2) { }

编辑:根据web-tiki的评论调整选择器.