Question

我错过了关于nth-type-type 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到您的nth-of-type，如此

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

例如nth-of-type(6n+2) - 6表示周期大小，n是计数器，2表示何时开始

Answer 2

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

CSS nth-of-type无法按预期工作

2 个答案: