理解nth-of-type选择器的问题

Question

我正在努力寻找一些我从未发现过的困难：S所以我有类的对象。每隔一天（每个月的每一个细胞），我必须区分这些对象：5绿色3连续红色，但从第3个元素开始。所以前两个必须是红色的。

好吧，我可以用jQuery轻松完成：

$（document）.ready（function（）{  $（“td.everyDay：nth（0），td.everyDay：nth（1）”）。css（{“background-color”：“red”，“color”：“white”}）;     $（“td.everyDay：nth-​​of-type（4n + 4），td.everyDay：nth-​​of-type（5n + 5）”）。css（{“background-color”：“green”，“color” “：”white“}）;

}）;

我无法让这个工作！我已经尝试了所有现有的数字！ -___-而且我已经找到它是如何工作的，但它并不是100％明确的，也许它甚至不如我清楚......任何人都知道如何使用它并可以向我解释？

干杯！

更新：

它更接近我需要的东西，然而，它是不对的，因为它不会跟随全年的5红3绿色（从第3个元素开始）：

所以如果有人还能解释我nth-child和括号内的数字是如何工作的......更好！我不想要解决方案，我想亲自理解，但要理解我在做什么：谢谢你的帮助！

和页面来源：

从浏览器控制台

<table class="t"><tbody><tr><th>2016</th><th>Dl</th><th>Dt</th><th>Dc</th><th>Dj</th><th>Dv</th><th>Ds</th><th>Dg</th><th>Dl</th><th>Dt</th><th>Dc</th><th>Dj</th><th>Dv</th><th>Ds</th><th>Dg</th><th>Dl</th><th>Dt</th><th>Dc</th><th>Dj</th><th>Dv</th><th>Ds</th><th>Dg</th><th>Dl</th><th>Dt</th><th>Dc</th><th>Dj</th><th>Dv</th><th>Ds</th><th>Dg</th><th>Dl</th><th>Dt</th><th>Dc</th><th>Dj</th><th>Dv</th><th>Ds</th><th>Dg</th><th>Dl</th><th>Dt</th></tr><tr><td>Gener</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td><td class="blank"></td></tr><tr><td>Febrer</td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Març</td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Abril</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Maig</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td></tr><tr><td>Juny</td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Juliol</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td><td class="blank"></td></tr><tr><td>Agost</td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Setembre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Octubre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td></tr><tr><td>Novembre</td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr><tr><td>Decembre</td><td class="blank"></td><td class="blank"></td><td class="blank"></td><td class="cadaDia">1</td><td class="cadaDia">2</td><td class="cadaDia">3</td><td class="cadaDia">4</td><td class="cadaDia">5</td><td class="cadaDia">6</td><td class="cadaDia">7</td><td class="cadaDia">8</td><td class="cadaDia">9</td><td class="cadaDia">10</td><td class="cadaDia">11</td><td class="cadaDia">12</td><td class="cadaDia">13</td><td class="cadaDia">14</td><td class="cadaDia">15</td><td class="cadaDia">16</td><td class="cadaDia">17</td><td class="cadaDia">18</td><td class="cadaDia">19</td><td class="cadaDia">20</td><td class="cadaDia">21</td><td class="cadaDia">22</td><td class="cadaDia">23</td><td class="cadaDia">24</td><td class="cadaDia">25</td><td class="cadaDia">26</td><td class="cadaDia">27</td><td class="cadaDia">28</td><td class="cadaDia">29</td><td class="cadaDia">30</td><td class="cadaDia">31</td><td class="blank"></td><td class="blank"></td><td class="blank"></td></tr></tbody></table>

Answer 1

以下是获得的CSS解决方案：

  

连续5绿3红，但从第3元素开始

.everyDay:nth-child(1n+3) {
    background-color: green;
}

.everyDay, .everyDay:nth-child(8n), .everyDay:nth-child(8n+9), .everyDay:nth-child(8n+10) {
    background-color: red;
    color: white;
}

<div class="everyDay">1</div>
<div class="everyDay">2</div>
<div class="everyDay">3</div>
<div class="everyDay">4</div>
<div class="everyDay">5</div>
<div class="everyDay">6</div>
<div class="everyDay">7</div>
<div class="everyDay">8</div>
<div class="everyDay">9</div>
<div class="everyDay">10</div>
<div class="everyDay">11</div>
<div class="everyDay">12</div>
<div class="everyDay">13</div>
<div class="everyDay">14</div>
<div class="everyDay">15</div>
<div class="everyDay">16</div>
<div class="everyDay">17</div>
<div class="everyDay">18</div>
<div class="everyDay">19</div>
<div class="everyDay">20</div>
<div class="everyDay">21</div>
<div class="everyDay">22</div>
<div class="everyDay">23</div>
<div class="everyDay">24</div>
<div class="everyDay">25</div>
<div class="everyDay">26</div>
<div class="everyDay">27</div>
<div class="everyDay">28</div>
<div class="everyDay">29</div>
<div class="everyDay">30</div>
<div class="everyDay">31</div>

:nth-child(1n+3)

选择所有从3

开始的孩子

:nth-child(8n)

覆盖以前的CSS规则，从8开始选择所有8第n（5 + 3）个元素，依此类推，以使用9, 10＆amp;选择:nth-child(8n+9)元素。 :nth-child(8n+10)