CSS nth-of-type无法正常工作

Question

What am I missing out on the functionality of the nth-of-type CSS3 selector?

Please see this codepen http://codepen.io/tuleby/pen/oqKAG

The desired result is three even rows with 6 divs on each, and thus 6 + 12 + 18 should be red. How come this does not work?

Thanks

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

You need to use n to your nth-of-type like this

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

for example nth-of-type(6n+2) - 6 represents a cycle size, n is a counter, and 2 are when is beginning

Answer 2

根据此处的规范，将:nth-of-type(6)更改为:nth-of-type(6n) ： http : //www.w3.org/TR/css3-selectors/#nth-of-type-伪 。