CSS nth類型不按預期方式工作

Question

我錯過了ñ類型的CSS3選擇器的功能？

請參閱本codepen http://codepen.io/tuleby/pen/oqKAG

期望的結果是三個連排在每個6個的div，因此6 + 12 + 18應該是紅色。這是怎麼回事？

感謝

HTML：

<div id="staff"> 

    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
    <div>11</div> 
    <div>12</div> 
    <div>13</div> 
    <div>14</div> 
    <div>15</div> 
    <div>16</div> 
    <div>17</div> 
    <div>18</div> 

    </div> 

CSS：

#staff { 
     width:100%; 
    } 


    #staff div { 
     float:left; 
     width: 14%; 
     margin: 0 3.2% 20px 0; 
     background-color: #ccc; 
    } 

    #staff div:nth-of-type(6) { 
     background-color: red; 
     margin-right: 0; 
    } 

Answer 1

您需要使用n你的第n-的型像這樣

#staff div:nth-of-type(6n) { 
    background-color: red; 
    margin-right: 0; 
} 

例如nth-of-type(6n+2) - 6代表一個循環的尺寸，n是一個計數器，2是當開始

Answer 2

變化:nth-of-type(6)到:nth-of-type(6n)，按照該規範在這裏：http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo。