Question

我正在尝试定位页面上的第1个，第2个和第3个.pricing-example，以便为每个页面应用不同的背景色。但是，使用下面的代码，当页面上有3个.pricing-example元素时，nth-child(1n)则针对项目1和3，而nth-child(3n)则针对项目2，我不理解。我试图实现的是在每个第三项上启用不同的背景色，如下所示：

项目1 =背景1
项目2 =背景2
第3项=背景3
项目4 =背景1
项目5 =背景2
项目6 =背景3
第7项=背景1
以此类推。...

HTML

<div class="blocks">
    <figure class="custom-block image"></figure>
    <figure class="custom-block text"></figure>
    <figure class="custom-block pricing-example"></figure>
    <figure class="custom-block pricing-example"></figure>
    <figure class="custom-block pricing-example"></figure>
</div>

CSS

.pricing-example {

    // Alternate background colours of images when multiple blocks
    &:nth-child(1n) {
        background-color: red;
    }
    &:nth-child(2n) {
        background-color: blue;
    }
    &:nth-child(3n) {
        background-color: green;
    }
}

Answer 1

伪类公式为（An + B）。根据{{3}}：

表示其数字位置在一系列同级中的元素对于每个正整数或零值，匹配模式An + B 。第一个元素的索引为1。值A和B必须都为是整数。

因此，您想使用3n+1，3n+2和3n+3：

p:nth-child(3n+1) {
  background: red;
}

p:nth-child(3n+2) {
  background: blue;
}

p:nth-child(3n+3) {
  background: green;
}

<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>1</p>
<p>2</p>
<p>3</p>

Answer 2

您需要这样做：

li:nth-child(3n+1) {
  background-color: red;
}

li:nth-child(3n+2) {
  background-color: blue;
}

li:nth-child(3n+3) {
  background-color: green;
}

<ul>
  <li>Item One</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
  <li>Item six</li>
  <li>Item seven</li>
  <li>Item eight</li>
  <li>Item nine</li>
  <ul>

SCSS版本：

ul {
    li {
        &:nth-child(3n+1) {
            background-color: red;
        }
        &:nth-child(3n+2) {
            background-color: blue;
        }
        &:nth-child(3n+3) {
           background-color: green;
        }
     }
 }

这是测试nth选择器的绝佳工具：https://css-tricks.com/examples/nth-child-tester/

：nth-child（）每三项目标

2 个答案:

：nth-​​child（）每三项目标

2 个答案:

：nth-child（）每三项目标