Question

我有这个HTML标记：

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>

    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>

    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
</div>

使用这些CSS属性：

.child {
    float: left;
    width: 10%;
    background-color: red;
}

如您所见，内容从1到10的类填满了width中的屏幕。并background-color red。{/ p>

我有其中的3个，我打算称这些'行'。

通过这样做，我已经实现了rows background-color yellow的最后一项：

.child:nth-of-type(10n) {
    background-color: yellow;
}

但每当我尝试做同样的事情，然后在每一行的第一个项目上，它就不起作用了：

.child:nth-of-type(1n) {
    background-color: yellow;
}

如何在不创建其他HTML元素的情况下为行中的每个第一项添加background-color。

Demo here

Answer 1

因为1n表示每个。

.child:nth-of-type(10n+1) {
     background-color: green;
}

OR

.child:first-child, .child:nth-of-type(10n) + .child {
     background-color: green;
}

Answer 2

因此，您希望对单元格应用不同的颜色（0,11,21等）。写下你的CSS。 “N”将从0开始，依此类推。它表示（0 * 10 + 1），（1 * 10 + 1），（2 * 10 + 1）。 More Details about the nth-of-type CSS

 .child:nth-of-type(10n+1) {
  background-color: green;
 }

Fiddle Demo

使用nth-of类型选择每个第一个元素

2 个答案: