CSS第n個孩子：每天4日，11日，18日等

Question

我有以下的div HTML結構：

• 一個
• 一個
• 一個
• b
• b
• b
• b
• 一個
• 一個
• 一個
• b
• b
• b
• b

等

於是，經過3次，自帶4次數b。我想用css nth-child選擇器來抓住每個B元素。 我試過nth-child：（4n + 3），但是這並沒有奏效。 這應該與純CSS，或者我必須使用JavaScript。

我認爲，如果這可能與CSS，我會聲明4 CSS選擇器。

謝謝！

Answer 1

您可以使用li:nth-child(7n+4), li:nth-child(7n+5) ...其中li:nth-child(7n+4)將匹配4，11，18 ...和li:nth-child(7n+5)將匹配5，12，19等

li:nth-child(7n+4), li:nth-child(7n+5), li:nth-child(7n+6), li:nth-child(7n+7) { 
 
    font-weight: bold; 
 
}

<ol><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li> 
 
</ol>

您也可以使用li:nth-child(7n), li:nth-child(7n-1) ...

li:nth-child(7n), li:nth-child(7n-1), li:nth-child(7n-2), li:nth-child(7n-3) { 
 
    font-weight: bold; 
 
}

<ol><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li><li>Li</li> 
 
</ol>

Answer 2

@ NenadVracar的答案是正確的，但下面是一個使用替代adjacent sibling selector：

li:nth-child(7n+4), 
 
li:nth-child(7n+4) + li, 
 
li:nth-child(7n+4) + li + li, 
 
li:nth-child(7n+4) + li + li + li { 
 
    color: red; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
    <li>b</li> 
 
</ul>