CSS第n个孩子选择第3个元素然后每4个？

Question

我正在尝试选择第3个元素,然后每4个元素.

所以它会选择3,7,11,15,19,23 ...等.

.project:nth-child(3), .project:nth-child(7n+4) {
    margin: 40px 0px 0px 0px;
}

当前代码有什么问题？它不起作用,保证金在右边距仍然设置为40px.

Answer 1

问题

你的第一个选择器是选择第三个元素:

.project:nth-child(3)

但是,您的第二个选择器是从第4个开始选择每个第7个元素:

.project:nth-child(7n+4)

解

您可以组合选择器以消除冗余,并将第二个选择器修改为:

nth-child(4n+3)

这样你的最终CSS读取:

.project:nth-child(4n+3) { margin: 40px 0px 0px 0px; }

这将从第三个元素开始选择每个第四个元素(4n),并选择第三个元素本身(+ 3).

例

这是一个示例代码段:

p:nth-child(4n+3) {
    background:red;
}

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>