我试图选择第3个元素，然后每4个元素。
所以它会选择3,7,11,15,19,23 ......等等。
.project:nth-child(3), .project:nth-child(7n+4) {
margin: 40px 0px 0px 0px;
}
目前的代码有什么问题？它不起作用，保证金在右边缘仍然设置为40px。
答案 0 :(得分：18)
<强>问题
您的第一个选择器正在选择第三个元素：
.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>
答案 1 :(得分：1)
.project:nth-child(4n+3) {
color: red;
}<ul>
<li class="project">1</li>
<li class="project">2</li>
<li class="project">3</li>
<li class="project">4</li>
<li class="project">5</li>
<li class="project">6</li>
<li class="project">7</li>
<li class="project">8</li>
<li class="project">9</li>
<li class="project">10</li>
<li class="project">11</li>
<li class="project">12</li>
<li class="project">13</li>
<li class="project">14</li>
<li class="project">15</li>
<li class="project">16</li>
<li class="project">17</li>
<li class="project">18</li>
<li class="project">19</li>
<li class="project">20</li>
<li class="project">21</li>
<li class="project">22</li>
<li class="project">23</li>
<li class="project">24</li>
<li class="project">25</li>
</ul>
答案 2 :(得分：0)
只需使用nth-child添加 nth-child（4n + 3），它允许您选择：nth-child（3）及以上（如果它只是n），但是因为它是4n表示选择第3个元素，然后每4个元素。
.project:nth-child(4n+3) {
margin: 40px 0px 0px 0px;
background:red;
}
n-child（4n + 3）
4n =选择每4个元素
3 =选择元素编号3
因此，结合它意味着从元素3开始挑选每四个元素。
我建议您查看此链接以获取更多说明：http://nthmaster.com/