li第n個孩子在css中繁殖

我有一個日曆佈局，它有行和列，每行肯定會有7列，因爲在一週內會有7天。我如何使用CSS來定位每一行的最後一項？li第n個孩子在css中繁殖

我卡在這個

li:nth-child(7) 
li:nth-child(14)

等

有沒有更好的辦法做到這一點像CSS使用數學？

來源

2017-04-12 Alex Yong

這應該工作：李：第n個孩子（7N）{// 您的樣式 } – Mark

嘗試

li:nth-child(7n+0) { 
    background: red; 
}

實施例。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     li:nth-child(7n+0) { 
 
      background: red; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <li>The 1 li element.</li> 
 
    <li>The 2 li element.</li> 
 
    <li>The 3 li element.</li> 
 
    <li>The 4 li element.</li> 
 
    <li>The 5 li element.</li> 
 
    <li>The 6 li element.</li> 
 
    <li>The 7 li element.</li> 
 
    <li>The 8 li element.</li> 
 
    <li>The 9 li element.</li> 
 

 
    <li>The 10 li element.</li> 
 
    <li>The 11 li element.</li> 
 
    <li>The 12 li element.</li> 
 
    <li>The 13 li element.</li> 
 
    <li>The 14 li element.</li> 
 
    <li>The 15 li element.</li> 
 
    <li>The 16 li element.</li> 
 
    <li>The 17 li element.</li> 
 
    <li>The 18 li element.</li> 
 

 
</body> 
 

 
</html>

來源

2017-04-12 06:13:11 Nitheesh

ul li:nth-child(7n+0){ color: red }

<ul> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
<li>test</li> 
 
</ul>

來源

2017-04-12 06:12:18 Cam

您可以使用li:nth-child(7n)。

這樣它每次只能瞄準裏數第7個元素。

*{margin:0pc; padding:0px; box-sizing:border-box;} 
 
li{ width:14.287%; display:inline-block;} 
 
li:nth-child(7n){ color:red;}

<ul> 
 
<li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li> 
 

 
</ul>

來源

2017-04-12 06:13:21

但唯一的問題是，除非他在下個月打包，否則幾個星期不會有7個項目。 – Cam

@Cam所以你想要每一行的最後一個目標？ –

那麼，OP寫道：_如何使用CSS來定位每一行的最後一項？_ ...所以你錯過了實際的問題？ – LGSon

使用以下方法來選擇每第七個列表項：

li:nth-child(7n)

此外，您還可以在http://nth-test.com/測試nth-child選擇。

來源

2017-04-12 06:14:33

請使用下面的代碼來選擇每第七個列表項：

:nth-child(7n)

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     ul :nth-child(7n) { 
 
      background: blue; 
 
      color: white 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li>li-1</li> 
 
    <li>li-2</li> 
 
    <li>li-3</li> 
 
    <li>li-4</li> 
 
    <li>li-5</li> 
 
    <li>li-6</li> 
 
    <li>li-7</li> 
 
    <li>li-8</li> 
 
    <li>li-9</li> 
 
    <li>li-10</li> 
 
    <li>li-11</li> 
 
    <li>li-12</li> 
 
    <li>li-13</li> 
 
    <li>li-14</li> 
 
    <li>li-15</li> 
 
    <li>li-16</li> 
 
    <li>li-17</li> 
 
    <li>li-18</li> 
 
    <li>li-19</li> 
 
    <li>li-20</li> 
 
    <li>li-21</li> 
 
    <li>li-22</li> 
 
    <li>li-23</li> 
 
    </ul> 
 

 
</body> 
 

 
</html>

來源

2017-04-12 06:52:54

li第n個孩子在css中繁殖

回答

相關問題